Cesium测量距离和面积

直接上代码，下面两个函数已经封装好，可以直接调用；有疑问请加群讨论：854184700

//线长度测量
function measureLine(viewer) {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);
    var positions = [];
    var poly = null;
    var distance = 0;
    var cartesian = null;
    var floatingPoint;
    var labelPt;
    handler.setInputAction(function (movement) {
        let ray = viewer.camera.getPickRay(movement.endPosition);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (!Cesium.defined(cartesian)) //跳出地球时异常
            return;
        if (positions.length >= 2) {
            if (!Cesium.defined(poly)) {
                poly = new PolyLinePrimitive(positions);
            } else {
                positions.pop();
                positions.push(cartesian);
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    handler.setInputAction(function (movement) {
        let ray = viewer.camera.getPickRay(movement.position);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (!Cesium.defined(cartesian)) //跳出地球时异常
            return;
        if (positions.length == 0) {
            positions.push(cartesian.clone());
        }
        positions.push(cartesian);
        //记录鼠标单击时的节点位置，异步计算贴地距离
        labelPt = positions[positions.length - 1];
        if (positions.length > 2) {
            getSpaceDistance(positions);
        } else if (positions.length == 2) {
            //在三维场景中添加Label
            floatingPoint = viewer.entities.add({
                name: '空间距离',
                position: labelPt,
                point: {
                    pixelSize: 5,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2,
                }
            });
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handler.setInputAction(function (movement) {
        handler.destroy(); //关闭事件句柄
        handler = undefined;
        positions.pop(); //最后一个点无效
        if (positions.length == 1)
            viewer.entities.remove(floatingPoint);

    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    var PolyLinePrimitive = (function () {
        function _(positions) {
            this.options = {
                name: '直线',
                polyline: {
                    show: true,
                    positions: [],
                    material: Cesium.Color.CHARTREUSE,
                    width: 5,
                    clampToGround: true
                }
            };
            this.positions = positions;
            this._init();
        }

        _.prototype._init = function () {
            var _self = this;
            var _update = function () {
                return _self.positions;
            };
            //实时更新polyline.positions
            this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
            var addedEntity = viewer.entities.add(this.options);
        };

        return _;
    })();

    //空间两点距离计算函数
    function getSpaceDistance(positions) {
        console.log(22)
        //只计算最后一截，与前面累加
        //因move和鼠标左击事件，最后两个点坐标重复
        var i = positions.length - 3;
        var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
        var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);
        getTerrainDistance(point1cartographic, point2cartographic);
    }

    function getTerrainDistance(point1cartographic, point2cartographic) {
        var geodesic = new Cesium.EllipsoidGeodesic();
        geodesic.setEndPoints(point1cartographic, point2cartographic);
        var s = geodesic.surfaceDistance;
        var cartoPts = [point1cartographic];
        for (var jj = 1000; jj < s; jj += 1000) {　　//分段采样计算距离
            var cartoPt = geodesic.interpolateUsingSurfaceDistance(jj);
            cartoPts.push(cartoPt);
        }
        cartoPts.push(point2cartographic);
        //返回两点之间的距离
        var promise = Cesium.sampleTerrain(viewer.terrainProvider, 8, cartoPts);
        Cesium.when(promise, function (updatedPositions) {
            for (var jj = 0; jj < updatedPositions.length - 1; jj++) {
                var geoD = new Cesium.EllipsoidGeodesic();
                geoD.setEndPoints(updatedPositions[jj], updatedPositions[jj + 1]);
                var innerS = geoD.surfaceDistance;
                innerS = Math.sqrt(Math.pow(innerS, 2) + Math.pow(updatedPositions[jj + 1].height - updatedPositions[jj].height, 2));
                distance += innerS;
            }
            //在三维场景中添加Label
            var lon1 = viewer.scene.globe.ellipsoid.cartesianToCartographic(labelPt).longitude;
            var lat1 = viewer.scene.globe.ellipsoid.cartesianToCartographic(labelPt).latitude;
            var lonLat = "(" + Cesium.Math.toDegrees(lon1).toFixed(2) + "," + Cesium.Math.toDegrees(lat1).toFixed(2) + ")";
            var textDisance = distance.toFixed(2) + "米";
            if (distance > 10000)
                textDisance = (distance / 1000.0).toFixed(2) + "千米";
            floatingPoint = viewer.entities.add({
                name: '贴地距离',
                position: labelPt,
                point: {
                    pixelSize: 5,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2,
                },
                label: {
                    text: lonLat + textDisance,
                    font: '18px sans-serif',
                    fillColor: Cesium.Color.GOLD,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    outlineWidth: 2,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    pixelOffset: new Cesium.Cartesian2(20, -20),
                }
            });
        });
    }
}

//面积测量
function measurePolygn(viewer) {
    // 鼠标事件
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);
    var positions = [];
    var tempPoints = [];
    var polygon = null;
    var cartesian = null;
    var floatingPoint;//浮动点
    handler.setInputAction(function (movement) {
        let ray = viewer.camera.getPickRay(movement.endPosition);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        positions.pop();//移除最后一个
        positions.push(cartesian);
        if (positions.length >= 2) {
            var dynamicPositions = new Cesium.CallbackProperty(function () {
                return new Cesium.PolygonHierarchy(positions);
                return positions;
            }, false);
            polygon = PolygonPrimitive(dynamicPositions);
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    handler.setInputAction(function (movement) {
        let ray = viewer.camera.getPickRay(movement.position);
        cartesian = viewer.scene.globe.pick(ray, viewer.scene);
        if (positions.length == 0) {
            positions.push(cartesian.clone());
        }
        positions.push(cartesian);
        //在三维场景中添加点
        var cartographic = Cesium.Cartographic.fromCartesian(positions[positions.length - 1]);
        var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
        var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
        var heightString = cartographic.height;
        var labelText = "(" + longitudeString.toFixed(2) + "," + latitudeString.toFixed(2) + ")";
        tempPoints.push({ lon: longitudeString, lat: latitudeString, hei: heightString });
        floatingPoint = viewer.entities.add({
            name: '多边形面积',
            position: positions[positions.length - 1],
            point: {
                pixelSize: 5,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
                outlineWidth: 2,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            },
            label: {
                text: labelText,
                font: '18px sans-serif',
                fillColor: Cesium.Color.GOLD,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(20, -20),
            }
        });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    handler.setInputAction(function (movement) {
        handler.destroy();
        positions.pop();
        var textArea = getArea(tempPoints) + "平方公里";
        viewer.entities.add({
            name: '多边形面积',
            position: positions[positions.length - 1],
            label: {
                text: textArea,
                font: '18px sans-serif',
                fillColor: Cesium.Color.GOLD,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(20, -40),
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
            }
        });
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    var radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
    var degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
    //计算多边形面积
    function getArea(points) {
        var res = 0;
        //拆分三角曲面
        for (var i = 0; i < points.length - 2; i++) {
            var j = (i + 1) % points.length;
            var k = (i + 2) % points.length;
            var totalAngle = Angle(points[i], points[j], points[k]);
            var dis_temp1 = distance(positions[i], positions[j]);
            var dis_temp2 = distance(positions[j], positions[k]);
            res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));
        }
        return (res / 1000000.0).toFixed(4);
    }

    /*角度*/
    function Angle(p1, p2, p3) {
        var bearing21 = Bearing(p2, p1);
        var bearing23 = Bearing(p2, p3);
        var angle = bearing21 - bearing23;
        if (angle < 0) {
            angle += 360;
        }
        return angle;
    }
    /*方向*/
    function Bearing(from, to) {
        var lat1 = from.lat * radiansPerDegree;
        var lon1 = from.lon * radiansPerDegree;
        var lat2 = to.lat * radiansPerDegree;
        var lon2 = to.lon * radiansPerDegree;
        var angle = -Math.atan2(Math.sin(lon1 - lon2) * Math.cos(lat2), Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2));
        if (angle < 0) {
            angle += Math.PI * 2.0;
        }
        angle = angle * degreesPerRadian;//角度
        return angle;
    }

    function PolygonPrimitive(positions) {
        polygon = viewer.entities.add({
            polygon: {
                hierarchy: positions,
                material: Cesium.Color.GREEN.withAlpha(0.1),
            }
        });

    }

    function distance(point1, point2) {
        var point1cartographic = Cesium.Cartographic.fromCartesian(point1);
        var point2cartographic = Cesium.Cartographic.fromCartesian(point2);
        /**根据经纬度计算出距离**/
        var geodesic = new Cesium.EllipsoidGeodesic();
        geodesic.setEndPoints(point1cartographic, point2cartographic);
        var s = geodesic.surfaceDistance;
        //返回两点之间的距离
        s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
        return s;
    }
}

measureLine(viewer)
measurePolygn(viewer) 

//获取坐标点 // handler.setInputAction(function (event) { //     viewer.scene.globe.depthTestAgainstTerrain = true; //     var earthPosition = viewer.scene.pickPosition(event.position); //     console.log(earthPosition) //     //3.地标坐标：获取点击处地球表面的世界坐标，不包括模型、倾斜摄影表面 //     var ray = viewer.camera.getPickRay(event.position); //     var earthPosition = viewer.scene.globe.pick(ray, viewer.scene); //     if (Cesium.defined(earthPosition)) { //         console.log(earthPosition); //     } // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

/*     vue中整理好 */
    // //距离计算     // measureLine(viewer) {     //     var handler = new Cesium.ScreenSpaceEventHandler(     //       this.viewer.scene._imageryLayerCollection     //     );     //     var positions = [];     //     var poly = null;     //     var distance = 0;     //     var cartesian = null;     //     var floatingPoint;     //     var labelPt;     //     var that = this;     //     handler.setInputAction(function(movement) {     //       let ray = that.viewer.camera.getPickRay(movement.endPosition);     //       cartesian = that.viewer.scene.globe.pick(ray, that.viewer.scene);     //       if (!Cesium.defined(cartesian))     //         //跳出地球时异常     //         return;     //       if (positions.length >= 2) {     //         if (!Cesium.defined(poly)) {     //           poly = new PolyLinePrimitive(positions);     //         } else {     //           positions.pop();     //           positions.push(cartesian);     //         }     //       }     //     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);        //     handler.setInputAction(function(movement) {     //       let ray = that.viewer.camera.getPickRay(movement.position);     //       cartesian = that.viewer.scene.globe.pick(ray, that.viewer.scene);     //       if (!that.Cesium.defined(cartesian))     //         //跳出地球时异常     //         return;     //       if (positions.length == 0) {     //         positions.push(cartesian.clone());     //       }     //       positions.push(cartesian);     //       //记录鼠标单击时的节点位置，异步计算贴地距离     //       labelPt = positions[positions.length - 1];     //       if (positions.length > 2) {     //         getSpaceDistance(positions);     //       } else if (positions.length == 2) {     //         //在三维场景中添加Label     //         floatingPoint = that.viewer.entities.add({     //           name: "空间距离",     //           position: labelPt,     //           point: {     //             pixelSize: 5,     //             color: Cesium.Color.RED,     //             outlineColor: Cesium.Color.WHITE,     //             outlineWidth: 2     //           }     //         });     //       }     //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);        //     handler.setInputAction(function(movement) {     //       handler.destroy(); //关闭事件句柄     //       handler = undefined;     //       positions.pop(); //最后一个点无效     //       if (positions.length == 1) that.viewer.entities.remove(floatingPoint);     //     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);        //     var PolyLinePrimitive = (function() {     //       function _(positions) {     //         this.options = {     //           name: "直线",     //           polyline: {     //             show: true,     //             positions: [],     //             material: Cesium.Color.CHARTREUSE,     //             width: 5,     //             clampToGround: true     //           }     //         };     //         this.positions = positions;     //         this._init();     //       }        //       _.prototype._init = function() {     //         var _self = this;     //         var _update = function() {     //           return _self.positions;     //         };     //         //实时更新polyline.positions     //         this.options.polyline.positions = new Cesium.CallbackProperty(     //           _update,     //           false     //         );     //         var addedEntity = that.viewer.entities.add(this.options);     //       };        //       return _;     //     })();        //     //空间两点距离计算函数     //     function getSpaceDistance(positions) {     //       //只计算最后一截，与前面累加     //       //因move和鼠标左击事件，最后两个点坐标重复     //       var i = positions.length - 3;     //       var point1cartographic = that.Cesium.Cartographic.fromCartesian(     //         positions[i]     //       );     //       var point2cartographic = that.Cesium.Cartographic.fromCartesian(     //         positions[i + 1]     //       );     //       getTerrainDistance(point1cartographic, point2cartographic);     //     }        //     function getTerrainDistance(point1cartographic, point2cartographic) {     //       var geodesic = new Cesium.EllipsoidGeodesic();     //       geodesic.setEndPoints(point1cartographic, point2cartographic);     //       var s = geodesic.surfaceDistance;     //       var cartoPts = [point1cartographic];     //       for (var jj = 1000; jj < s; jj += 1000) {     //         //分段采样计算距离     //         var cartoPt = geodesic.interpolateUsingSurfaceDistance(jj);     //         cartoPts.push(cartoPt);     //       }     //       cartoPts.push(point2cartographic);     //       //返回两点之间的距离     //       var promise = that.Cesium.sampleTerrain(     //         that.viewer.terrainProvider,     //         8,     //         cartoPts     //       );     //       Cesium.when(promise, function(updatedPositions) {     //         for (var jj = 0; jj < updatedPositions.length - 1; jj++) {     //           var geoD = new Cesium.EllipsoidGeodesic();     //           geoD.setEndPoints(updatedPositions[jj], updatedPositions[jj + 1]);     //           var innerS = geoD.surfaceDistance;     //           innerS = Math.sqrt(     //             Math.pow(innerS, 2) +     //               Math.pow(     //                 updatedPositions[jj + 1].height - updatedPositions[jj].height,     //                 2     //               )     //           );     //           distance += innerS;     //         }     //         //在三维场景中添加Label     //         var lon1 = that.viewer.scene.globe.ellipsoid.cartesianToCartographic(     //           labelPt     //         ).longitude;     //         var lat1 = that.viewer.scene.globe.ellipsoid.cartesianToCartographic(     //           labelPt     //         ).latitude;     //         var lonLat =     //           "(" +     //           Cesium.Math.toDegrees(lon1).toFixed(2) +     //           "," +     //           Cesium.Math.toDegrees(lat1).toFixed(2) +     //           ")";     //         var textDisance = distance.toFixed(2) + "米";     //         if (distance > 10000)     //           textDisance = (distance / 1000.0).toFixed(2) + "千米";     //         floatingPoint = that.viewer.entities.add({     //           name: "贴地距离",     //           position: labelPt,     //           point: {     //             pixelSize: 5,     //             color: Cesium.Color.RED,     //             outlineColor: Cesium.Color.WHITE,     //             outlineWidth: 2     //           },     //           label: {     //             text: lonLat + textDisance,     //             font: "18px sans-serif",     //             fillColor: Cesium.Color.GOLD,     //             style: Cesium.LabelStyle.FILL_AND_OUTLINE,     //             outlineWidth: 2,     //             verticalOrigin: Cesium.VerticalOrigin.BOTTOM,     //             pixelOffset: new Cesium.Cartesian2(20, -20)     //           }     //         });     //       });     //     }     //   },        //   //面积计算     //   measurePolygn(viewer) {     //     // 鼠标事件     //     var handler = new Cesium.ScreenSpaceEventHandler(     //       viewer.scene._imageryLayerCollection     //     );     //     var positions = [];     //     var tempPoints = [];     //     var polygon = null;     //     var cartesian = null;     //     var floatingPoint; //浮动点     //     var that = this;     //     handler.setInputAction(function(movement) {     //       let ray = that.viewer.camera.getPickRay(movement.endPosition);     //       cartesian = that.viewer.scene.globe.pick(ray, that.viewer.scene);     //       positions.pop(); //移除最后一个     //       positions.push(cartesian);     //       if (positions.length >= 2) {     //         var dynamicPositions = new Cesium.CallbackProperty(function() {     //           return new Cesium.PolygonHierarchy(positions);     //           return positions;     //         }, false);     //         polygon = PolygonPrimitive(dynamicPositions);     //       }     //     }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);        //     handler.setInputAction(function(movement) {     //       let ray = that.viewer.camera.getPickRay(movement.position);     //       cartesian = that.viewer.scene.globe.pick(ray, viewer.scene);     //       if (positions.length == 0) {     //         positions.push(cartesian.clone());     //       }     //       positions.push(cartesian);     //       //在三维场景中添加点     //       var cartographic = that.Cesium.Cartographic.fromCartesian(     //         positions[positions.length - 1]     //       );     //       var longitudeString = that.Cesium.Math.toDegrees(     //         cartographic.longitude     //       );     //       var latitudeString = that.Cesium.Math.toDegrees(cartographic.latitude);     //       var heightString = cartographic.height;     //       var labelText =     //         "(" +     //         longitudeString.toFixed(2) +     //         "," +     //         latitudeString.toFixed(2) +     //         ")";     //       tempPoints.push({     //         lon: longitudeString,     //         lat: latitudeString,     //         hei: heightString     //       });     //       floatingPoint = that.viewer.entities.add({     //         name: "多边形面积",     //         position: positions[positions.length - 1],     //         point: {     //           pixelSize: 5,     //           color: Cesium.Color.RED,     //           outlineColor: Cesium.Color.WHITE,     //           outlineWidth: 2,     //           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND     //         },     //         label: {     //           text: labelText,     //           font: "18px sans-serif",     //           fillColor: Cesium.Color.GOLD,     //           style: Cesium.LabelStyle.FILL_AND_OUTLINE,     //           outlineWidth: 2,     //           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,     //           pixelOffset: new Cesium.Cartesian2(20, -20)     //         }     //       });     //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);     //     handler.setInputAction(function(movement) {     //       handler.destroy();     //       positions.pop();     //       var textArea = getArea(tempPoints) + "平方公里";     //       that.viewer.entities.add({     //         name: "多边形面积",     //         position: positions[positions.length - 1],     //         label: {     //           text: textArea,     //           font: "18px sans-serif",     //           fillColor: Cesium.Color.GOLD,     //           style: Cesium.LabelStyle.FILL_AND_OUTLINE,     //           outlineWidth: 2,     //           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,     //           pixelOffset: new Cesium.Cartesian2(20, -40),     //           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND     //         }     //       });     //     }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);     //     var radiansPerDegree = Math.PI / 180.0; //角度转化为弧度(rad)     //     var degreesPerRadian = 180.0 / Math.PI; //弧度转化为角度     //     //计算多边形面积     //     function getArea(points) {     //       var res = 0;     //       //拆分三角曲面     //       for (var i = 0; i < points.length - 2; i++) {     //         var j = (i + 1) % points.length;     //         var k = (i + 2) % points.length;     //         var totalAngle = Angle(points[i], points[j], points[k]);     //         var dis_temp1 = distance(positions[i], positions[j]);     //         var dis_temp2 = distance(positions[j], positions[k]);     //         res += dis_temp1 * dis_temp2 * Math.abs(Math.sin(totalAngle));     //       }     //       return (res / 1000000.0).toFixed(4);     //     }        //     /*角度*/     //     function Angle(p1, p2, p3) {     //       var bearing21 = Bearing(p2, p1);     //       var bearing23 = Bearing(p2, p3);     //       var angle = bearing21 - bearing23;     //       if (angle < 0) {     //         angle += 360;     //       }     //       return angle;     //     }     //     /*方向*/     //     function Bearing(from, to) {     //       var lat1 = from.lat * radiansPerDegree;     //       var lon1 = from.lon * radiansPerDegree;     //       var lat2 = to.lat * radiansPerDegree;     //       var lon2 = to.lon * radiansPerDegree;     //       var angle = -Math.atan2(     //         Math.sin(lon1 - lon2) * Math.cos(lat2),     //         Math.cos(lat1) * Math.sin(lat2) -     //           Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon1 - lon2)     //       );     //       if (angle < 0) {     //         angle += Math.PI * 2.0;     //       }     //       angle = angle * degreesPerRadian; //角度     //       return angle;     //     }        //     function PolygonPrimitive(positions) {     //       polygon = that.viewer.entities.add({     //         polygon: {     //           hierarchy: positions,     //           material: Cesium.Color.GREEN.withAlpha(0.1)     //         }     //       });     //     }        //     function distance(point1, point2) {     //       var point1cartographic = that.Cesium.Cartographic.fromCartesian(point1);     //       var point2cartographic = that.Cesium.Cartographic.fromCartesian(point2);     //       /**根据经纬度计算出距离**/     //       var geodesic = new Cesium.EllipsoidGeodesic();     //       geodesic.setEndPoints(point1cartographic, point2cartographic);     //       var s = geodesic.surfaceDistance;     //       //返回两点之间的距离     //       s = Math.sqrt(     //         Math.pow(s, 2) +     //           Math.pow(point2cartographic.height - point1cartographic.height, 2)     //       );     //       return s;     //     }     //   }

相关学习群