Cesium 测量

最新推荐文章于 2024-09-02 22:50:32 发布
最新推荐文章于 2024-09-02 22:50:32 发布
阅读量1k 收藏 2
点赞数
分类专栏： Cesium 文章标签： javascript
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/inspurs06/article/details/109381817
版权
本文介绍了如何使用Cesium实现三维场景中的空间距离测量和面积测量功能。通过ScreenSpaceEventHandler监听鼠标事件，动态绘制折线并计算距离，以及利用几何原理计算多边形面积，为用户提供直观的测量工具。
摘要由CSDN通过智能技术生成 
//测距
function measureLineSpace(viewer, handlerDis) {
    // 取消双击事件-追踪该位置
    //viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    handlerDis = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    var positions = [];
    var poly = null;
    // var tooltip = document.getElementById("toolTip");
    var distance = 0;
    var cartesian = null;
    var floatingPoint;
    // tooltip.style.display = "block";
    handlerDis.setInputAction(function (movement) {
        // tooltip.style.left = movement.endPosition.x + 3 + "px";
        // tooltip.style.top = movement.endPosition.y - 25 + "px";
        // tooltip.innerHTML = '<p>单击开始，右击结束</p>';
        // cartesian = viewer.scene.pickPosition(movement.endPosition);
        cartesian = viewer.scene.pickPosition(movement.endPosition);
        //cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
        if("undefined" != typeof cartesian) {
            if (positions.length >= 2) {
                if (!Cesium.defined(poly)) {
                    poly = new PolyLinePrimitive(positions);
                } else {
                    positions.pop();
                    // cartesian.y += (1 + Math.random());
                    positions.push(cartesian);
                }
                // tooltip.innerHTML='<p>'+distance+'米</p>';
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    handlerDis.setInputAction(function (movement) {
        // tooltip.style.display = "none";
        // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
        // cartesian = viewer.scene.pickPosition(movement.position);
        //获取模型上位置
        cartesian = viewer.scene.pickPosition(movement.position);
        if (positions.length == 0) {
            positions.push(cartesian.clone());
        }
        positions.push(cartesian);
        distance = getSpaceDistance(positions);
        //在三维场景中添加Label
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height+0.1;
        var textDisance = distance + "米";
        floatingPoint = viewer.entities.add({
            name: '测量-空间直线距离',
            // position: Cesium.Cartesian3.fromDegrees(cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180,cartographic.height),
            //position: positions[positions.length - 1],
            position:Cesium.Cartesian3.fromDegrees(longitude,latitude,height),
            point: {
                pixelSize: 5,
                color: Cesium.Color.RED,
                outlineColor: Cesium.Color.WHITE,
   heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND,
                fillColor: Cesium.Color.GOLD,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(20, -20),
                clampToGround: false
    },
            label: {
                text: 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),
                clampToGround: false,
            }
        });
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handlerDis.setInputAction(function (movement) {
        handlerDis.destroy(); //关闭事件句柄
        positions.pop(); //最后一个点无效
        // viewer.entities.remove(floatingPoint);
        // tooltip.style.display = "none";

    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    var PolyLinePrimitive = (function () {
        function _(positions) {
            this.options = {
                name: '直线',
                polyline: {
                    show: true,
                    positions: [],
                    material: Cesium.Color.CHARTREUSE,
                    width: 3,
                    clampToGround: false
                }
            };
            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);
            viewer.entities.add(this.options);
        };
        return _;
    })();
}
//空间两点距离计算函数
function getSpaceDistance(positions) {
    var distance = 0;
    for (var i = 0; i < positions.length - 1; i++) {
        if("undefined" == typeof(positions[i]) ||"undefined" == typeof(positions[i + 1])){
            break;
        }
        var point1cartographic = Cesium.Cartographic.fromCartesian(positions[i]);
        var point2cartographic = Cesium.Cartographic.fromCartesian(positions[i + 1]);
        /**根据经纬度计算出距离**/
        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));
        distance = distance + s;
    }
    distance = distance.toFixed(2);
    distance = Number(distance);
    distance = distance > 1000 ? (distance/1000).toFixed(2) + 'km' : distance + 'm';
    return distance;
}

//测量面积

function measureLineSpaceArea(viewer, handlerSpaceArea) {
    // 取消双击事件-追踪该位置
    //viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    handlerSpaceArea = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    var positions = [];
    var poly = null;
    // var tooltip = document.getElementById("toolTip");
    var distance = 0;
    var cartesian = null;
    var floatingPoint;
    // tooltip.style.display = "block";
    handlerSpaceArea.setInputAction(function (movement) {
        cartesian = viewer.scene.pickPosition(movement.endPosition);
        if("undefined" != typeof cartesian){
            if (positions.length >= 2) {
                if (!Cesium.defined(poly)) {
                    poly = new PolyLinePrimitive(positions);
                } else {
                    positions.pop();
                    // cartesian.y += (1 + Math.random());
                    positions.push(cartesian);
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    var firstPosition;
    var spaceTempPoints = [];
    handlerSpaceArea.setInputAction(function (movement) {
        // tooltip.style.display = "none";
        // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
        // cartesian = viewer.scene.pickPosition(movement.position);
        //获取模型上位置
        cartesian = viewer.scene.pickPosition(movement.position);
        if (positions.length == 0) {
            positions.push(cartesian.clone());
        }
        if(!firstPosition){
            firstPosition = cartesian;
        }
        positions.push(cartesian);
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height+0.1;
        spaceTempPoints.push({ lon: longitude, lat: latitude ,hei:height});
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    handlerSpaceArea.setInputAction(function (movement) {
        handlerSpaceArea.destroy(); //关闭事件句柄
        positions.pop(); //最后一个点无效
        positions.push(firstPosition);
        var cartographic = Cesium.Cartographic.fromCartesian(firstPosition);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        var height = cartographic.height+0.1;
        //添加面积提示entity
        var textArea = getSpanceArea(spaceTempPoints) + "平方米";
        viewer.entities.add({
            name : '测量-多边形面积',
            position : Cesium.Cartesian3.fromDegrees(longitude,latitude,height),
            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
                clampToGround: false,
                showBackground:true
            }
        });
        // viewer.entities.remove(floatingPoint);
        // tooltip.style.display = "none";
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    var radiansPerDegree = Math.PI / 180.0;//角度转化为弧度(rad)
    var degreesPerRadian = 180.0 / Math.PI;//弧度转化为角度
    //计算多边形面积
    function getSpanceArea(points) {
        var res = 0;
        //拆分三角曲面
        for (var i = 0,j=1; j < points.length - 1; j++) {
            var k = j+1;
            var totalAngle = SpaceAngle(points[i], points[j], points[k]);
            var dis_temp1 = getDistance(positions[i], positions[j]);
            var dis_temp2 = getDistance(positions[j], positions[k]);
            var sinV = Math.sin(totalAngle*3.14/180);
            sinV = Math.abs(sinV);
            var res1 = dis_temp1 * dis_temp2 * sinV/2 ;
            res += res1;
        }
        return (res).toFixed(2);
    }
    /*角度*/
    function SpaceAngle(p1, p2, p3) {
        var bearing21 = SpaceBearing(p2, p1);
        var bearing23 = SpaceBearing(p2, p3);
        var angle = bearing21 - bearing23;
        if (angle < 0) {
            angle += 360;
        }
        return angle;
    }
    /*方向*/
    function SpaceBearing(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;
    }
    var PolyLinePrimitive = (function () {
        function _(positions) {
            this.options = {
                name: '直线',
                polyline: {
                    show: true,
                    positions: [],
                    material: Cesium.Color.CHARTREUSE,
                    width: 3,
                    clampToGround: false,
                    zIndex:100
                }
            };
            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);
            viewer.entities.add(this.options);
        };
        return _;
    })();

}
大胡子的光头
关注
专栏目录
cesium 距离测量 面积测量
07-15
代码直接写在html文件中，打开即用。通过三个按键分别实现距离测量、面积测量以及清除，距离测量、面积测量时左键添加点，右键结束添加，会自动计算距离或者面积，清除之后清除点要素线要素以及显示的面积和距离。
cesium中测距
12-04 2388
MeasureMangner.js 测试：
cesium的标绘与测量
最新发布
honor2的博客
09-02 1071
cesium的标绘与测量
Cesium空间距离量测
m0_67946993的博客
03-19 2190
利用鼠标事件动态绘制线并且计算距离
cesium测距
qq_39262418的博客
09-22 645
复制过去就能用 const deleteRangeArea = () => { let RangeArea = viewer.entities._entities._array for (let i = 0; i < RangeArea.length; i++) { if (RangeArea[i]._name === "_range") { viewer.entities.remove(Rang..
cesium 测量距离
12-14
通过三个按键分别实现距离测量、面积测量以及清除，距离测量、面积测量时左键添加点，右键结束添加，会自动计算距离或者面积，清除之后清除点要素线要素以及显示的面积和距离。
cesium测量距离、面积
10-27
在“cesium测量距离、面积”的主题中，我们主要关注如何利用Cesium进行空间测量，包括测量直线距离和计算平面区域的面积。Cesium提供了丰富的API和功能来实现这些操作，对于地理数据的分析和应用具有极大的价值。 1...
Cesium 测量贴地 点、线、面、园
04-10
在本项目中，我们主要探讨的是使用Cesium进行地理空间数据的测量，包括点、线、面和圆的测量功能。Cesium是一个强大的开源JavaScript库，用于创建交互式的3D地球浏览器，它广泛应用于Web GIS领域。Vue.js是前端开发...
Cesium 空间测量+面积测量+贴地测量
04-18
在Cesium中，空间测量、面积测量和贴地测量是常见的功能，它们在地理信息系统（GIS）、地图应用、遥感分析等领域有着广泛的应用。下面我们将深入探讨这些知识点。 一、Cesium简介 Cesium是由Analytical Graphics, ...
封装cesium的测量工具类
08-13
下载之前先看下使用教程吧，看看是不是你想要的: https://blog.csdn.net/KK_bluebule/article/details/126320645
cesium中长度测量和面积测量
苟冬新
11-29 3007
效果 vue+cesium做的测量功能，参考网上修改 // *************测量空间直线距离************ static measureLineSpace() { this.removeMeasure(); let _this = this; let viewer = this.viewer; // 取消双击事件-追踪该位置 viewer.cesiumWidget.screenSpaceEventH
cesium-measure.rar
01-28
cesium gis 空间距离 空间面积
cesium测距测面工具，html,三维开发
05-21
cesium测距测面工具，html,三维开发实例 前端开发
Cesium量算
01-25
Cesium量算，实现在Cesium地图上点击几个点，然后计算这根线的长度。
Cesium实现动态距离测量
07-12
Cesium实现动态距离测量，任意路径距离测量，不间断测量
cesium-测量距离
this__valve的博客
05-30 244
cesium长度测量
Cesium 空间量算——距离量算
虎康的博客
09-19 1046
在按下鼠标左键开始绘制第一个点之后，测距工具将会创建一个用于显示测距结果的线段、标签等元素。测量结果将实时更新，直到鼠标左键抬起。类创建自定义的测距工具，这样可以根据具体需求进行更加详细的设置，例如支持多线段测量等。具体使用方法可以参考Cesium官方文档。实际开发中我们经常需要用到量测工具，而Cesium没有直接提供量测功能，如何在 Cesium 中实现两点间距离测量。在Cesium中，可以使用。类进行测距外，还可以使用。
Cesium 测距、测面功能实现
GIS（地理信息系统）
07-21 3795
Cesium 测距、测面功能实现
Cesium 实现距离测算
qq_26579715的博客
03-06 1840
<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <me...
cesium测量插件
09-06
Cesium测量插件是一种使用Cesium地图平台进行各种测量操作的工具。Cesium是一款用于构建三维地理信息系统的开源JavaScript库，它提供了一套强大的工具和功能来展示地理空间数据。 Cesium测量插件可以帮助用户进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值