Cesium 测距测区域面积

已于 2025-02-12 16:59:22 修改
阅读量182 收藏
点赞数 1
文章标签： javascript
于 2025-02-10 16:41:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/songJunFeng1/article/details/145553363
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Cesium示例集--测量平面面积</title>
    <script type="text/javascript" src="./cesium/Cesium.js"></script>
    <script type="text/javascript" src="./libs/turf.min.js"></script>
    <link rel="stylesheet" href="./cesium/Widgets/widgets.css">
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        .cesium-container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .opt-bar {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, .8);
            padding: 5px 10px;
            border-radius: 2px;

            >a {
                font-size: 14px;
                color: #00e7ff;
                cursor: pointer;
                margin: 0 10px;
            }
        }
    </style>
</head>

<body onload="load()">
    <div id="cesiumContainer" class="cesium-container"></div>
    <div class="opt-bar">
        <a onclick="startEdit()">测量平面面积</a>
        <a onclick="clearEdit()">清除</a>
    </div>
    <div id="toolTip" style="position: absolute;font-size: 12px;background: rgba(0,0,0,.8);color:#fff;padding: 3px 5px;"
        style="display: none;"></div>

    <script>
        function getMapExtent () {
            let camera = viewer.scene.camera;
            let pos = {
                position: camera.position,
                heading: camera.heading,
                pitch: camera.pitch,
                roll: camera.roll,
            };
            console.log('屏幕当前范围：', pos);
        }

        var handler, viewer;
        var labels = [], movePush = false, positions = [], floatLabel = null, polyline = null, polygon = null, controlPoints = [];
        var tooltip = document.getElementById("toolTip");

        function load () {

            viewer = new Cesium.Viewer("cesiumContainer", {
                animation: false,//是否创建动画小器件，左下角仪表
                fullscreenButton: false,//是否显示全屏按钮
                // geocoder: false,//是否显示geocoder小器件，右上角查询按钮
                // homeButton: false,//是否显示Home按钮
                infoBox: false,//是否显示信息框
                // sceneModePicker: false,//是否显示3D/2D选择器
                // scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
                selectionIndicator: false,//是否显示选取指示器组件
                timeline: false,//是否显示时间轴
                // navigationHelpButton: false,//是否显示右上角的帮助按钮
                baselLayerPicker: false,// 将图层选择的控件关掉，才能添加其他影像数据
                shadows: false,//是否显示背影
                baseLayerPicker: false,//是否显示图层选择器
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
                    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png'
                })
            });
            //去除版权信息
            viewer._cesiumWidget._creditContainer.style.display = "none";

            //屏蔽Cesium的默认双击追踪选中entity行为
            viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
                Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
            );

            //默认开启地形
            // viewer.terrainProvider = Cesium.createWorldTerrain();

            var pos = {
                "position": {
                    "x": -2463425.8997346475,
                    "y": 4873855.487729879,
                    "z": 3288016.4618711653
                },
                "heading": 0.1341636770247039,
                "pitch": -0.817714806133921,
                "roll": 0.00001433107210147
            };
            viewer.camera.flyTo({
                destination: new Cesium.Cartesian3(
                    pos.position.x,
                    pos.position.y,
                    pos.position.z
                ),
                orientation: {
                    heading: pos.heading,
                    pitch: pos.pitch,
                    roll: pos.roll,
                },
            });

        }

        function clearEdit () {
            positions = [];
            if (polyline) {
                viewer.entities.remove(polyline);
                polyline = null;
            }
            if (polygon) {
                viewer.entities.remove(polygon);
                polygon = null;
            }
            labels = [];
            for (var ind = 0; ind < controlPoints.length; ind++) {
                viewer.entities.remove(controlPoints[ind]);
            }
            controlPoints = [];
            if (floatLabel) {
                viewer.entities.remove(floatLabel);
                floatLabel = null;
            }
            floatLabel = null;
            if (handler) {
                handler.destroy();
                handler = null;
            }
            movePush = false;
            viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
            viewer.trackedEntity = undefined;
        }

        function startEdit () {
            clearEdit();
            tooltip.style.display = "block";

            handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

            //左键单击，开始绘制
            handler.setInputAction(function (evt) {
                // tooltip.style.display = "none";

                var cartesian = getCatesian3FromPX(evt.position, viewer).cartesian;
                if (!cartesian) return;
                if (movePush) {
                    positions.pop();
                    movePush = false;
                }
                var point = createPoint(cartesian.clone());
                point.wz = positions.length; // 和坐标点关联
                controlPoints.push(point);
                positions.push(cartesian);

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            //鼠标移动
            handler.setInputAction(function (evt) {
                tooltip.style.left = evt.endPosition.x + 40 + "px";
                tooltip.style.top = evt.endPosition.y + 30 + "px";
                if (positions.length < 1) {
                    tooltip.innerHTML = '<p>单击开始绘制</p>';
                    return;
                }
                tooltip.innerHTML = '<p>双击结束，右键取消上一步</p>';

                var cartesian = getCatesian3FromPX(evt.endPosition, viewer).cartesian;
                if (!cartesian) return;



                if (positions.length >= 1) {
                    if (!movePush) {
                        positions.push(cartesian);
                        movePush = true;
                    } else {
                        positions[positions.length - 1] = cartesian;
                    }
                    if (positions.length == 2) {
                        if (!Cesium.defined(polyline)) {
                            polyline = createPolyline();
                        }
                    }
                    if (positions.length == 3) {
                        if (!Cesium.defined(polygon)) {
                            polygon = createPolygon();
                            polygon.isFilter = true;
                            polygon.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
                        }
                        if (!floatLabel) {
                            floatLabel = createLabel(cartesian, "", {
                                style: Cesium.LabelStyle.FILL,
                                showBackground: true,
                                backgroundColor: Cesium.Color.fromCssColorString('#303336'),
                                pixelOffset: new Cesium.Cartesian2(0, -50)
                            });
                            floatLabel.label.heightReference = 1;
                        }
                    }
                    if (polygon) {
                        var areaCenter = getAreaAndCenter(positions)
                        var area = areaCenter.area;
                        var center = areaCenter.center;

                        var text = formateArea(area);
                        floatLabel.label.text = `平面面积：${text}`;
                        floatLabel.area = area;
                        if (center) floatLabel.position.setValue(center);
                        floatLabel.show = true;
                    }

                }

            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

            //右键取消上一步
            handler.setInputAction(function (evt) {
                if (!polyline && !polygon) return;
                if (positions.length <= 2) return; // 默认第一个不给删除
                positions.splice(positions.length - 2, 1);
                viewer.entities.remove(controlPoints.pop());  // 移除最后一个

                if (positions.length == 2) {
                    if (polygon) {
                        viewer.entities.remove(polygon);
                        polygon = null;
                        if (polyline) polyline.show = true;
                    }
                    floatLabel.show = false;
                }
                if (positions.length == 1) {
                    if (polyline) {
                        viewer.entities.remove(polyline);
                        polyline = null;
                    }
                    tooltip.innerHTML = '<p>单击开始测量</p>';
                    tooltip.style.left = evt.endPosition.x + 40 + "px";
                    tooltip.style.top = evt.endPosition.y + 30 + "px";
                    movePush = false;
                    positions = [];
                }
                if (positions.length > 2) {
                    var areaCenter = getAreaAndCenter(positions);
                    var area = areaCenter.area;
                    var center = areaCenter.center;
                    var text = formateArea(area);
                    floatLabel.label.text = `平面面积：${text}`;
                    if (center) floatLabel.position.setValue(center);
                    floatLabel.area = area;
                    floatLabel.show = true;
                }


            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

            //左键双击完成绘制
            handler.setInputAction(function (evt) {
                if (!polygon) return;

                tooltip.style.display = "none";

                positions.pop();
                viewer.entities.remove(controlPoints.pop()); // 移除最后一个
                movePush = false;

                viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
                viewer.trackedEntity = undefined;
                var areaCenter = getAreaAndCenter(positions)
                var area = areaCenter.area;
                var center = areaCenter.center;
                var text = formateArea(area);
                floatLabel.label.text = `平面面积：${text}`;
                floatLabel.area = area;
                if (center) floatLabel.position.setValue(center);

                if (handler) {
                    handler.destroy();
                    handler = null;
                }

            }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
        }


        function createPoint (position) {
            if (!position) return;

            return this.viewer.entities.add({
                position: position,
                point: {
                    pixelSize: 6,
                    color: Cesium.Color.RED,
                    outlineWidth: 1,
                    outlineColor: Cesium.Color.WHITE,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                },
                show: false
            });
        }

        function createPolyline () {
            var ent = viewer.entities.add({
                polyline: {
                    positions: new Cesium.CallbackProperty(function () {
                        var linePositions = positions.concat([positions[0]]);
                        return linePositions
                    }, false),
                    material: Cesium.Color.RED,
                    width: 2
                }
            });
            return ent;
        }

        function createPolygon () {
            var polygon = viewer.entities.add({
                polygon: new Cesium.PolygonGraphics({
                    hierarchy: new Cesium.CallbackProperty(function () {
                        return new Cesium.PolygonHierarchy(positions);
                    }, false),
                    material: Cesium.Color.RED.withAlpha(0.4),
                    heightReference: Cesium.HeightReference.NONE,
                    perPositionHeight: true
                }),

            });
            return polygon;
        }

        function getAreaAndCenter (positions, height) {
            if (!positions || positions.length < 1) return;
            var cartographics = [];
            var turfPoints = [];
            for (var i = 0; i < positions.length; i++) {
                var cartesian3 = positions[i];
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
                cartographics.push([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)]);
                turfPoints.push(turf.point([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)]));
            }
            if (!cartographics.length) return;
            cartographics = cartographics.concat([cartographics[0]]);
            var polygon = turf.polygon([cartographics]);
            var area = turf.area(polygon);
            //获取当前范围的中心点
            var features = turf.featureCollection(turfPoints);
            var turfCenter = turf.center(features);
            var center = turfCenter.geometry.coordinates;
            let centerNum = height ? Cesium.Cartesian3.fromDegrees(center[0], center[1], height) : Cesium.Cartesian3.fromDegrees(center[0], center[1]);

            return {
                area: area,
                center: centerNum
            };
        }

        function formateArea (val) {
            if (val == undefined) return;
            let dwStr = '';
            if (Number(val) > 1000000) {
                dwStr += (Number(val) / 1000000).toFixed(2) + "km²";
            } else {
                dwStr += Number(val).toFixed(2) + "m²";
            }
            return dwStr;
        }

        function createLabel (c, text, params) {
            if (!c) return;
            return viewer.entities.add({
                position: c,
                label: {
                    text: text || "",
                    font: '14px Helvetica',
                    showBackground: params ? params.showBackground : false,
                    backgroundColor: params ? params.backgroundColor : Cesium.Color.WHITE,
                    backgroundPadding: new Cesium.Cartesian2(10, 8),
                    fillColor: params ? params.fillColor : Cesium.Color.WHITE,
                    outlineColor: params ? params.outlineColor : Cesium.Color.BLACK,
                    outlineWidth: 2,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    pixelOffset: params ? params.pixelOffset : new Cesium.Cartesian2(0, -20)
                }
            });
        }

        function getCatesian3FromPX (px, viewer) {
            var picks = viewer.scene.drillPick(px);
            viewer.scene.render();
            var cartesian;
            var isOn3dtiles = 'no';
            for (var i = 0; i < picks.length; i++) {
                if ((picks[i] && picks[i].primitive) && picks[i].primitive instanceof Cesium.Cesium3DTileset) { //模型上拾取
                    isOn3dtiles = 'yes';
                    break;
                }
            }
            if (isOn3dtiles == 'yes') {
                cartesian = viewer.scene.pickPosition(px);
            } else {
                var ray = viewer.camera.getPickRay(px);
                if (!ray) return null;
                cartesian = viewer.scene.globe.pick(ray, viewer.scene);
            }
            return { cartesian: cartesian, isOn3dtiles: isOn3dtiles };
        }

    </script>
</body>

</html>

测距 
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Cesium示例集--测量平面面积</title>
    <script type="text/javascript" src="./cesium/Cesium.js"></script>
    <script type="text/javascript" src="./libs/turf.min.js"></script>
    <link rel="stylesheet" href="./cesium/Widgets/widgets.css">
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            user-select: none;
        }

        .cesium-container {
            /* margin-top: 200px; */
            width: 100%;
            height: 100%;
            position: relative;
        }

        .opt-bar {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, .8);
            padding: 5px 10px;
            border-radius: 2px;

            >a {
                font-size: 14px;
                color: #00e7ff;
                cursor: pointer;
                margin: 0 10px;
            }
        }

        #toolTip {
            /* background-color: #00e7ff!important; */
        }

        /* 添加CSS过渡动画 */
        .measure-tooltip {
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
            max-width: 300px;
            background: rgba(40, 40, 40, 0.9) !important;
            border-radius: 4px;
            padding: 8px 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="cesium-container"></div>
    <div class="opt-bar">
        <a onclick="startEdit()">测量平面面积</a>
        <a onclick="clearEdit()">清除</a>
    </div>
    <!-- <div id="toolTip" style="position: absolute;font-size: 12px;background: rgba(0,0,0,.8);color:#fff;padding: 3px 5px;"
        style="display: none;"></div> -->
    <script>

        class CesiumPopupClass {
            constructor(viewer, options) {
                this.viewer = viewer
                this.position = options.position;
                this.options = this.extend({}, options);
                var popupContainer = document.createElement("div");
                popupContainer.classList.add('popup');
                var popupInner = options.content;
                popupContainer.innerHTML = popupInner;
                popupContainer.style.display = 'none';
                viewer.cesiumWidget.container.appendChild(popupContainer);
                popupContainer.style.cssText = "display: none;position: absolute;left: -100;top: -100;z-index:9999;";

                this.popupContainer = popupContainer;

                // 初始化  
                this.init();
            }
            init() {
                if (this.position) {
                    this.popupContainer.style.display = 'block'
                    this.renderListener = this.viewer.scene.postRender.addEventListener(this.render, this)
                }
            }
            updateContent(newContent) {
                if (this.popupContainer) {
                    this.popupContainer.innerHTML = newContent;
                }
            }
            render() {
                var ellipsoid = this.viewer.scene.globe.ellipsoid;
                var geometry = Cesium.Cartesian3.fromDegrees(
                    this.position[0],
                    this.position[1],
                    this.position[2] ? this.position[2] : 0,
                    ellipsoid
                );

                if (!geometry) return
                var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, geometry)
                if (!position) {
                    return
                }
                if (this.popupContainer) {
                    this.popupContainer.style.left = position.x - this.popupContainer.offsetWidth / 2 + 'px'
                    this.popupContainer.style.top = position.y - this.popupContainer.offsetHeight - 10 + 'px'
                }
            }
            remove() {
                if (this.popupContainer) {
                    this.popupContainer.parentNode.removeChild(this.popupContainer)
                    this.popupContainer = null
                }

                if (this.renderListener) {
                    this.renderListener()
                    this.renderListener = null
                }

                if (this.viewer) {
                    this.viewer = null
                }
            }
            extend(obj, obj2) {
                for (var k in obj2) {
                    obj[k] = obj2[k];
                }
                return obj;
            }
        }

        let viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,//是否创建动画小器件，左下角仪表
            fullscreenButton: false,//是否显示全屏按钮
            // geocoder: false,//是否显示geocoder小器件，右上角查询按钮
            // homeButton: false,//是否显示Home按钮
            infoBox: false,//是否显示信息框
            // sceneModePicker: false,//是否显示3D/2D选择器
            // scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            selectionIndicator: false,//是否显示选取指示器组件
            timeline: false,//是否显示时间轴
            // navigationHelpButton: false,//是否显示右上角的帮助按钮
            baselLayerPicker: false,// 将图层选择的控件关掉，才能添加其他影像数据
            shadows: false,//是否显示背影
            baseLayerPicker: false,//是否显示图层选择器
            imageryProvider: new Cesium.UrlTemplateImageryProvider({
                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png'
            })
        });
        if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
            //判断是否支持图像渲染像素化处理
            viewer.resolutionScale = window.devicePixelRatio;
        }
        //开启抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = true;
        //去除版权信息
        viewer._cesiumWidget._creditContainer.style.display = "none";

        //屏蔽Cesium的默认双击追踪选中entity行为
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
            Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
        );
        //默认开启地形
        // viewer.terrainProvider = Cesium.createWorldTerrain();

        var pos = {
            "position": {
                "x": -2463425.8997346475,
                "y": 4873855.487729879,
                "z": 3288016.4618711653
            },
            "heading": 0.1341636770247039,
            "pitch": -0.817714806133921,
            "roll": 0.00001433107210147
        };
        viewer.camera.flyTo({
            destination: new Cesium.Cartesian3(
                pos.position.x,
                pos.position.y,
                pos.position.z
            ),
            orientation: {
                heading: pos.heading,
                pitch: pos.pitch,
                roll: pos.roll,
            },
        });



        class AreaDraw {
            constructor(viewer, id = Date.now()) {
                this.viewer = viewer;
                this.polyLineHeight = 0.2
                this.handler = null;
                this.positions = [];
                this.polyline = null;
                this.polygon = null;
                this.controlPoints = [];
                this.floatLabelAreaShow = false;
                this.floatLabel = null;// 面积
                this.movePush = false;
                this.tooltip = null;
                this.id = id;
                this.popDiv = null
                this.rect = this.viewer.canvas.getBoundingClientRect();
                this.pointStyle = {
                    pixelSize: 6,
                    color: Cesium.Color.fromCssColorString("rgba(255,0,0,1)"),
                    outlineWidth: 1,
                    outlineColor: Cesium.Color.fromCssColorString("rgba(255,255,255,1)"),
                }
                this.polylineStyle = {
                    width: 4,
                    material: Cesium.Color.fromCssColorString("rgba(255,255,0,1)"),
                }
                this.polygonStyle = {
                    material: Cesium.Color.fromCssColorString("rgba(0,255,255,0.4)"),
                }
            }
            startEdit(callback) {
                // 创建一个 div 元素
                let toolTip = document.createElement("div");
                this.tooltip = toolTip
                // 设置 div 的 ID
                toolTip.id = "toolTip";

                // 设置 div 的样式
                toolTip.style.position = "absolute";
                toolTip.style.fontSize = "14px";
                toolTip.style.background = "rgba(255,255,255,.8)";
                toolTip.style.color = "#000000";
                toolTip.style.padding = "3px 5px";
                toolTip.style.display = "none"; // 初始隐藏
                // 将该 div 插入到页面中（例如插入到 body 中）
                document.body.appendChild(toolTip);
                toolTip.style.maxWidth = "200px";
                this.tooltip.style.display = "block";
                this.tooltip.style.zIndex = "9999";
                this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);

                //左键单击，开始绘制
                this.handler.setInputAction((evt) => {
                    // tooltip.style.display = "none";

                    var cartesian = this.getCatesian3FromPX(evt.position, this.viewer).cartesian;
                    if (!cartesian) return;
                    if (this.movePush) {
                        this.positions.pop();
                        this.movePush = false;
                    }
                    var point = this.createPoint(cartesian.clone());
                    point.wz = this.positions.length; // 和坐标点关联
                    this.controlPoints.push(point);
                    this.positions.push(cartesian);

                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                //鼠标移动
                this.handler.setInputAction((evt) => {

                    var rect = this.rect;
                    this.tooltip.style.left = rect.left + evt.endPosition.x + 40 + "px";
                    this.tooltip.style.top = rect.top + evt.endPosition.y + 30 + "px";
                    if (this.positions.length < 1) {
                        this.tooltip.innerHTML = '<div>单击开始绘制</div>';
                        return;
                    }
                    this.tooltip.innerHTML = `<div style='color:#2525F5;font-weight: 700;'>正在绘制中:</div>
                        <div>单击确定点位，双击结束当前绘制，右键取消上一步</div>`;

                    var cartesian = this.getCatesian3FromPX(evt.endPosition, this.viewer).cartesian;
                    if (!cartesian) return;



                    if (this.positions.length >= 1) {
                        if (!this.movePush) {
                            this.positions.push(cartesian);
                            this.movePush = true;
                        } else {
                            this.positions[this.positions.length - 1] = cartesian;
                        }
                        if (this.positions.length == 2) {
                            if (!Cesium.defined(this.polyline)) {
                                this.polyline = this.createPolyline();
                            }
                        }
                        if (this.positions.length == 3) {
                            if (!Cesium.defined(this.polygon)) {
                                this.polygon = this.createPolygon();
                                this.polygon.isFilter = true;
                                this.polygon.objId = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
                            }
                            if (this.floatLabelAreaShow && !this.floatLabel) {
                                this.floatLabel = this.createLabel(cartesian, "", {
                                    style: Cesium.LabelStyle.FILL,
                                    showBackground: true,
                                    backgroundColor: Cesium.Color.fromCssColorString('#303336'),
                                    pixelOffset: new Cesium.Cartesian2(0, -50)
                                });
                                this.floatLabel.label.heightReference = 1;
                            }
                        }
                        if (this.floatLabelAreaShow && this.polygon) {
                            var areaCenter = this.getAreaAndCenter(this.positions)
                            var area = areaCenter.area;
                            var center = areaCenter.center;

                            var text = this.formateArea(area);
                            this.floatLabel.label.text = `平面面积：${text}`;
                            this.floatLabel.area = area;
                            if (center) this.floatLabel.position.setValue(center);
                            this.floatLabel.show = true;
                        }

                    }

                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);



                //右键取消上一步
                this.handler.setInputAction((evt) => {
                    if (!this.polyline && !this.polygon) return;
                    if (this.positions.length <= 2) return; // 默认第一个不给删除
                    this.positions.splice(this.positions.length - 2, 1);
                    this.viewer.entities.remove(this.controlPoints.pop());  // 移除最后一个

                    if (this.positions.length == 2) {
                        if (this.polygon) {
                            this.viewer.entities.remove(this.polygon);
                            this.polygon = null;
                            if (this.polyline) this.polyline.show = true;
                        }
                        if (this.floatLabelAreaShow) {
                            this.floatLabel.show = false;
                        }

                    }
                    if (this.positions.length == 1) {
                        if (this.polyline) {
                            this.viewer.entities.remove(this.polyline);
                            this.polyline = null;
                        }
                        var rect = this.rect;
                        this.tooltip.innerHTML = '<div>单击开始测量</div>';
                        this.tooltip.style.left = rect.left + evt.endPosition.x + 40 + "px";
                        this.tooltip.style.top = rect.top + evt.endPosition.y + 30 + "px";
                        this.movePush = false;
                        this.positions = [];
                    }
                    if (this.floatLabelAreaShow && this.positions.length > 2) {
                        var areaCenter = this.getAreaAndCenter(this.positions);
                        var area = areaCenter.area;
                        var center = areaCenter.center;
                        var text = this.formateArea(area);
                        this.floatLabel.label.text = `平面面积：${text}`;
                        if (center) this.floatLabel.position.setValue(center);
                        this.floatLabel.area = area;
                        this.floatLabel.show = true;
                    }


                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

                //左键双击完成绘制
                this.handler.setInputAction((evt) => {

                    // if (!this.polygon) return;

                    if (this.tooltip) {
                        this.tooltip.parentNode.removeChild(this.tooltip);
                        // document.body.removeChild(this.tooltip);
                        this.tooltip = null;
                    }
                    this.positions.pop();
                    this.viewer.entities.remove(this.controlPoints.pop()); // 移除最后一个
                    this.movePush = false;

                    // this.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
                    // this.viewer.trackedEntity = undefined;
                    if (this.floatLabelAreaShow) {
                        var areaCenter = this.getAreaAndCenter(this.positions)
                        var area = areaCenter.area;
                        var center = areaCenter.center;
                        var text = this.formateArea(area);
                        this.floatLabel.label.text = `平面面积：${text}`;
                        this.floatLabel.area = area;
                        if (center) this.floatLabel.position.setValue(center);
                    }
                    if (this.polyline) {
                        this.polyline.show = false;
                    }
                    if (this.polygon) {
                        this.addpop()
                    }
                    if (this.handler) {
                        this.handler.destroy();
                        this.handler = null;
                        typeof callback === 'function' && callback(this.positions)
                    }
                }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)


            }
            addpop() {
                let cartographic = Cesium.Cartographic.fromCartesian(this.positions[this.positions.length - 1]);
                let longitude = Cesium.Math.toDegrees(cartographic.longitude); // 经度 (从 -180 到 180)
                let latitude = Cesium.Math.toDegrees(cartographic.latitude); // 纬度 (从 -90 到 90)
                let popId = "id" + Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
                this.popDiv = new CesiumPopupClass(this.viewer, {
                    position: [longitude, latitude],
                    content: `<div class="popup-titleCss" id="${popId}" style="
                              position: absolute;
                              top: 10px;
                              right: 10px;
                              background-color: #FFFFFF;
                              color: #ff0000;
                              font-size: 15px;
                              font-weight: bold;
                              width: 20px;
                              height: 20px;
                              border-radius: 50%;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
                              cursor: pointer;
                              border: 2px solid red;
                              transition: all 0.3s ease;">
                              X
                            </div>`

                })


                document.querySelector(`#${popId}`).addEventListener("click", () => {
                    this.popDiv.remove()
                    this.clearEdit()
                })
            }
            clearEdit() {
                if (!this.viewer) {
                    return
                }
                if (this.popDiv) {
                    this.popDiv.remove();
                    this.popDiv = null
                }
                if (this.tooltip) {
                    document.body.removeChild(this.tooltip);
                    this.tooltip = null;
                }
                this.positions = [];
                if (this.polyline) {
                    this.viewer.entities.remove(this.polyline);
                    this.polyline = null;
                }
                if (this.polygon) {
                    this.viewer.entities.remove(this.polygon);
                    this.polygon = null;
                }
                for (var ind = 0; ind < this.controlPoints.length; ind++) {
                    this.viewer.entities.remove(this.controlPoints[ind]);
                    this.controlPoints[ind] = null;
                }
                this.controlPoints = [];
                if (this.floatLabelAreaShow) {
                    if (this.floatLabel) {
                        this.viewer.entities.remove(this.floatLabel);
                        this.floatLabel = null;
                    }
                    this.floatLabel = null;
                }

                if (this.handler) {
                    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
                    this.handler.destroy();
                    this.handler = null;
                }
                this.movePush = false;
                // this.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
                // this.viewer.trackedEntity = undefined;
                this.rect = null
                this.viewer = null
                for (let key in this.pointStyle) {
                    if (this.pointStyle.hasOwnProperty(key)) {
                        delete this.pointStyle[key];
                    }
                }
                for (let key in this.polylineStyle) {
                    if (this.polylineStyle.hasOwnProperty(key)) {
                        delete this.polylineStyle[key];
                    }
                }
                for (let key in this.polygonStyle) {
                    if (this.polygonStyle.hasOwnProperty(key)) {
                        delete this.polygonStyle[key];
                    }
                }
                this.id = null
                this.pointStyle = null
                this.polylineStyle = null
                this.polygonStyle = null
                console.log("clearEdit---------------");

            }


            createPoint(position) {
                if (!position) return;

                return this.viewer.entities.add({
                    position: position,
                    point: {
                        pixelSize: this.pointStyle.pixelSize,
                        color: this.pointStyle.color,
                        outlineWidth: this.pointStyle.outlineWidth,
                        outlineColor: this.pointStyle.outlineColor,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY
                    },
                    show: false
                });
            }

            createPolyline() {
                var ent = this.viewer.entities.add({
                    id: 'polylineDraw_' + this.id,
                    polyline: {
                        positions: new Cesium.CallbackProperty(() => {
                            var linePositions = this.positions.concat([this.positions[0]]);
                            return linePositions
                        }, false),
                        material: this.polylineStyle.material,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        width: this.polylineStyle.width,
                    }
                });
                return ent;
            }

            createPolygon() {
                var polygon = this.viewer.entities.add({
                    id: 'polygonDraw_' + this.id,
                    polygon: new Cesium.PolygonGraphics({
                        hierarchy: new Cesium.CallbackProperty(() => {
                            return new Cesium.PolygonHierarchy(this.positions);
                        }, false),
                        material: this.polygonStyle.material,
                        heightReference: Cesium.HeightReference.NONE,
                        perPositionHeight: true
                    }),

                });
                return polygon;
            }

            getAreaAndCenter(positions, height) {
                if (!positions || positions.length < 1) return;
                var cartographics = [];
                var turfPoints = [];
                for (var i = 0; i < positions.length; i++) {
                    var cartesian3 = positions[i];
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
                    cartographics.push([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)]);
                    turfPoints.push(turf.point([Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)]));
                }
                if (!cartographics.length) return;
                cartographics = cartographics.concat([cartographics[0]]);
                var polygon = turf.polygon([cartographics]);
                var area = turf.area(polygon);
                //获取当前范围的中心点
                var features = turf.featureCollection(turfPoints);
                var turfCenter = turf.center(features);
                var center = turfCenter.geometry.coordinates;
                let centerNum = height ? Cesium.Cartesian3.fromDegrees(center[0], center[1], height) : Cesium.Cartesian3.fromDegrees(center[0], center[1]);

                return {
                    area: area,
                    center: centerNum
                };
            }

            formateArea(val) {
                if (val == undefined) return;
                let dwStr = '';
                if (Number(val) > 1000000) {
                    dwStr += (Number(val) / 1000000).toFixed(2) + "km²";
                } else {
                    dwStr += Number(val).toFixed(2) + "m²";
                }
                return dwStr;
            }

            createLabel(c, text, params) {
                if (!c) return;
                return this.viewer.entities.add({
                    position: c,
                    label: {
                        text: text || "",
                        font: '14px Helvetica',
                        showBackground: params ? params.showBackground : false,
                        backgroundColor: params ? params.backgroundColor : Cesium.Color.WHITE,
                        backgroundPadding: new Cesium.Cartesian2(10, 8),
                        fillColor: params ? params.fillColor : Cesium.Color.WHITE,
                        outlineColor: params ? params.outlineColor : Cesium.Color.BLACK,
                        outlineWidth: 2,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        pixelOffset: params ? params.pixelOffset : new Cesium.Cartesian2(0, -20)
                    }
                });
            }

            getCatesian3FromPX(px, viewer) {
                // this.viewer.scene.render();
                var cartesian;
                var isOn3dtiles = 'no';
                var ray = this.viewer.camera.getPickRay(px);
                if (!ray) return null;
                cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);

                if (this.polyLineHeight) {
                    // 计算当前坐标点的法线方向
                    let ellipsoid = this.viewer.scene.globe.ellipsoid;
                    let normal = ellipsoid.geodeticSurfaceNormal(cartesian);

                    // 增加 2 米的高度：沿法线方向偏移
                    let offset = this.polyLineHeight;  // 增加的高度（单位：米）
                    let newCartesain = Cesium.Cartesian3.add(cartesian, Cesium.Cartesian3.multiplyByScalar(normal, offset, new Cesium.Cartesian3()), new Cesium.Cartesian3());
                    return { cartesian: newCartesain, isOn3dtiles: isOn3dtiles };
                } else {
                    return { cartesian: cartesian, isOn3dtiles: isOn3dtiles };
                }

            }


        }


        class AreaManager {
            constructor(viewer, fn) {
                this.viewer = viewer;
                this.idItem = null;
                this.areaList = [];
                this.handler = null
                this.fn = typeof fn == 'function' ? fn : null
                this.startEditFlag = false
                // this.drawArea = this.startEdit()
            }
            startEditManage(callback) {
                if (this.startEditFlag) return
                this.startEditFlag = true
                this.areaList.forEach(e => {
                    if (e.area.viewer && e.area.polyline) {
                        e.area.polyline.show = false
                    }
                })

                let id = Date.now()
                this.idItem = id

                this.areaList.push({
                    id: id,
                    area: new AreaDraw(this.viewer, id)
                })
                this.cancelHander()
                console.log(this.areaList.length, 'this.areaList.length');
                this.areaList[this.areaList.length - 1].area.startEdit((e) => {
                    console.log("完成");
                    this.startEditFlag = false
                    console.log(this.areaList, 'this.areaList');
                    this.AddLeftClick()
                    let resPosition = e.map(e => this.cartesianToLatLon(e))
                    typeof callback === 'function' && callback(resPosition)
                });
                this.drawArea = this.areaList[this.areaList.length - 1].area
                return this.areaList[this.areaList.length - 1].area
            }
            clearEditAll() {

                // 单个清除
                // let areaItem =  areaList.find(e=>e.id == idItem)
                // console.log(areaItem.area,'area');

                // areaItem.area.clearEdit();
                // areaItem.area = null
                // areaList.splice(areaList.findIndex(e=>e.id == idItem),1)

                this.areaList.forEach(e => {
                    e.area.clearEdit();
                    e.area = null;
                    e = null
                })
                this.fn = null
                this.areaList = null
                this.cancelHander()
                this.viewer = null
                this.startEditFlag = false
            }

            AddLeftClick() {
                this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
                this.handler.setInputAction((evt) => {
                    // 获取点击位置的实体
                    var pickedObject = this.viewer.scene.pick(evt.position);
                    if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id)) {
                        let list = pickedObject.id.id.split('_');
                        if (list[0] == 'polygonDraw') {
                            this.areaList.forEach(e => {
                                if (e.area.viewer) {
                                    if (String(e.id) === list[1]) {
                                        e.area.polyline.show = true
                                        console.log(e.area.positions, 'e.area.positions');
                                        let p = e.area.positions.map(e1 => {
                                            let result = this.cartesianToLatLon(e1);
                                            return result
                                        })
                                        if (this.fn) {
                                            this.fn(p)
                                        }
                                        console.log(p, 'e.area.positions');
                                    } else {
                                        e.area.polyline.show = false
                                    }
                                }
                            })
                        }
                    }

                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            }

            cancelHander() {
                if (this.handler) {
                    this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    this.handler.destroy();
                    this.handler = null;
                }
            }
            /**
            * 将笛卡尔坐标转换为经纬度坐标
            * @param {Cesium.Cartesian3} cartesian - 笛卡尔坐标
            * @param {Cesium.Ellipsoid} [ellipsoid=Cesium.Ellipsoid.WGS84] - 参考椭球体，默认为 WGS84
            * @returns {Object} 包含经度和纬度的对象，单位为度
            */
            cartesianToLatLon(cartesian, ellipsoid = Cesium.Ellipsoid.WGS84) {
                if (!Cesium.defined(cartesian)) {
                    throw new Error('cartesian 参数未定义');
                }

                var cartographic = ellipsoid.cartesianToCartographic(cartesian);
                if (!Cesium.defined(cartographic)) {
                    throw new Error('无法将笛卡尔坐标转换为地理坐标');
                }

                var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                var height = cartographic.height;

                return {
                    longitude: longitude,
                    latitude: latitude,
                    height: height
                };
            }
        }






        let m

        function startEdit() {
            if (!m) {
                m = new AreaManager(viewer, (e) => {
                    console.log(e, 'eee点击事件回调');
                });
            }

            m.startEditManage((e) => {
                console.log(e, 'drawArea完成事件回调')
            });
            // m.drawArea.polylineStyle.material = Cesium.Color.RED.withAlpha(0.5);
            // m.drawArea.floatLabelAreaShow = true
        }
        function clearEdit() {
            console.log(m, 'm');
            if (m) {
                m.clearEditAll()
                m = null
            }

        }

    </script>
</body>

</html>

AF01
关注
Cesium高级开发教程之四十五：测量工具#面积测量
Cesium开发工程师
03-08 115
通过获取多边形顶点的坐标数据，利用地理空间坐标转换和平面几何计算方法来计算面积。首先将经纬度坐标转换为笛卡尔坐标，然后根据多边形顶点的笛卡尔坐标，使用向量叉乘等方法计算多边形在平面上的投影面积，再根据地球模型和投影关系，将投影面积转换为实际的地球表面面积。：可以通过用户在地图上的交互操作获取多边形顶点的坐标。例如，使用方法结合鼠标点击事件，获取用户点击位置的笛卡尔坐标，再将其转换为经纬度坐标并存储。也可以从外部数据中读取多边形顶点的坐标数据。：使用 Cesium 的数学库函数进行面积计算。
cesium面积计算_cesium-长度测量和面积测量
weixin_39620943的博客
12-21 410
(更新)多谢网友的提醒，面积测量的小问题已经修改，经测试可正常使用网上找的大神的实现方法有点问题，实现有一些bug，作为cesium新手一个，弃之不忍，只好硬着头皮修改了，不过还好问题不大，再次mark一下，下次就可以直接用了image.pngimport Cesium from "cesium/Cesium";import widgets from "cesium/Widgets/widgets...
Cesium测量工具，距离测量、面积测量、高度测量
热门推荐
xt3d的博客
10-31 1万+
Cesium测量工具，距离测量、面积测量、高度测量 前言 测量工具几乎是每个GIS系统都具备的基础工具，Cesium没有自带测量工具，只能我们自己封装。 实现效果 实现思路 测距测高在Cesium中有相关的接口用来计算，但是测面没有计算方法，这里是通过turf.js来计算，所以计算的是平面面积 关键代码 测量距离 //距离测量类 export default class MeasureDistance { constructor(viewer) { this.viewer =
Cesium绘制点线面以及面积测量
06-05
两个Cesium两个drawhelper库，具体使用可参考工程代码，积分需求自己变得好高，手动修改低了。
cesium面积测量
08-06 581
使用方法新建一个文件measureArea.js将下面代码贴上去。
cesium-测量距离
this__valve的博客
05-30 408
cesium长度测量
cesium实现面积测量
12-04 4780
MeasureManager.js 测试：
cesium测量距离、面积
10-27
在“cesium测量距离、面积”的主题中，我们主要关注如何利用Cesium进行空间测量，包括测量直线距离和计算平面区域的面积。Cesium提供了丰富的API和功能来实现这些操作，对于地理数据的分析和应用具有极大的价值。 1...
cesium1.63.1之测距测面工具.zip
06-19
测面工具则更进一步，它能测量场景中某一区域的面积。这对于农业、环境科学、土地利用分析等领域都非常有价值。Cesium可能提供了API或示例代码来帮助开发者实现这个功能。实现测面的方法通常包括： 1. 用户选择边界...
cesium中测距测面
12-22 1131
封装MeasureTool.js。
Cesium三维测距测面工具前端开发实战
- 设置事件监听器，用于捕捉用户划定区域的事件，计算区域面积。 - 更新用户界面，显示计算结果。 五、常用API及代码示例 1. Cesium viewer初始化： ```javascript var viewer = new Cesium.Viewer('...
cesium 距离测量 面积测量
07-15
代码直接写在html文件中，打开即用。通过三个按键分别实现距离测量、面积测量以及清除，距离测量、面积测量时左键添加点，右键结束添加，会自动计算距离或者面积，清除之后清除点要素线要素以及显示的面积和距离。
Cesium量算
01-25
Cesium量算，实现在Cesium地图上点击几个点，然后计算这根线的长度。
Cesium量算点线面
03-16
Cesium量算点线面，画点线面并计算线的距离、多边形和圆的面积
Cesium 1.63.1 测距测面工具特性解析
在Cesium中，测距测面工具是用于测量地表两点或多点之间的距离、面积等空间属性的实用工具。它可能包含了以下功能： - **点到点的距离测量**：计算地球表面上任意两点之间的直线距离。 - **多点距离测量**：对一系列...
【Cesium】绘制区域面积测量
Wangzx的博客
07-12 1057
距离测量功能实现流程：1.鼠标连续点击生成区域范围的角点，使用红色圆圈表示；2.计算区域面积，将计算结果标记在最后一个点的位置；3.鼠标右键点击结束绘制，并解绑绘制功能。
Cesium之【空间面积】测量
Alice
08-22 8165
空间面积测量对象是平面，考虑到了取点的高度；地表面积测量的是球体（地球）曲面  //****************************测量空间面积************************************************// var measureAreaSpace = function (viewer, handler){ handler = new Cesi...
cesium中长度测量和面积测量
苟冬新
11-29 3141
效果 vue+cesium做的测量功能，参考网上修改 // *************测量空间直线距离************ static measureLineSpace() { this.removeMeasure(); let _this = this; let viewer = this.viewer; // 取消双击事件-追踪该位置 viewer.cesiumWidget.screenSpaceEventH
【UE5】Cesium for Unreal —— 测量面积
最新发布
ChaoChao66666的博客
07-15 2931
1. 启用插件“Geometry Script”插件2. 新建一个actor蓝图，这里就命名为“BP_Sphere”，用于创建面积测量的点打开“BP_Sphere”，添加一个球形组件和一个“CesiumGlobeAnchor”组件（添加“CesiumGlobeAnchor”组件主要是怕Cesium GeoReference原点位置变了后，“BP_Sphere”的位置会改变）球体能根据DynamicPawn的远近动态调整自身大小蓝图库函数“ChangeActorSizeByDistance”逻辑如下。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值