Cesium测量距离和面积、位置坐标

本文转载自查看原文 2020-12-06 20:50 1060 Cesium

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;

// }