cesium距离、面积量算

最新推荐文章于 2024-09-08 13:02:50 发布
最新推荐文章于 2024-09-08 13:02:50 发布
阅读量4.6k 收藏 11
点赞数 3
分类专栏： cesium 
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/lib/jquery.min.js"></script>

  <script src="Cesium/Cesium.js"></script>
  <script src="js/bootstrap.min.js"></script>

  <style>
      @import url(Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
      <button type="button" class="btn btn-info" id="moni" style="position:absolute;top:20px;" onclick="SetMode('drawPloy')">面积</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 95px;" onclick="SetMode('drawLine')">测量</button>
      <button type="button" class="btn btn-info"  style="position:absolute;top:20px;left: 185px;" onclick="clearDrawingBoard()">清除</button>

  <script>
    
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: true, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: true, //是否显示点击要素之后显示的信息
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        })
    });
    var scene = viewer.scene;


    var loadedModels = [];

    var tempPoints = [];
    var tempEntities = [];
    var tempPinEntities = [];
    var tempPinLon, tempPinLat;

    var handler = null;

    function clearEffects() {
        if (handler != null) {
            handler.destroy();
        }
    }

    //设置各种操作模式
    function SetMode(mode) {
        if (mode == "drawPloy")
        {
            tempPoints = [];
            handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    tempPoints.push({ lon: longitudeString, lat: latitudeString });
                    var tempLength = tempPoints.length;
                    drawPoint(tempPoints[tempPoints.length-1]);
                    if (tempLength > 1) {
                        drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                    }
                } 
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var tempLength = tempPoints.length;
                    if (tempLength < 3) {
                        alert('请选择3个以上的点再执行闭合操作命令');
                    } else {
                        drawLine(tempPoints[0], tempPoints[tempPoints.length - 1], true);
                        drawPoly(tempPoints);
                        <!-- highLightAssetsInArea(tempPoints); -->
                        
                    
                var         ent =
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(((tempPoints[0].lon +(tempPoints[tempPoints.length-1].lon+ tempPoints[tempPoints.length-2].lon)/2)/2 ),
                    ((tempPoints[0].lat +(tempPoints[tempPoints.length-1].lat+tempPoints[tempPoints.length -2].lat)/2 )/2)),
                    label: {
                        text: SphericalPolygonAreaMeters(tempPoints) .toFixed(1) + '㎡',
                        font: '22px Helvetica',
                        fillColor: Cesium.Color.BLACK
                    }
                });
            tempEntities.push(ent);
                        tempPoints = [];
                        clearEffects();
                    }

                }
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
        
       
        else if ("drawLine" == mode)
        {
            tempPoints = [];
            handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
            handler.setInputAction(function (click) {
                var cartesian = viewer.camera.pickEllipsoid(click.position, scene.globe.ellipsoid);
                if (cartesian) {
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
                    tempPoints.push({ lon: longitudeString, lat: latitudeString });
                    var tempLength = tempPoints.length;
                    drawPoint(tempPoints[tempPoints.length - 1]);
                    if (tempLength > 1) {
                        drawLine(tempPoints[tempPoints.length - 2], tempPoints[tempPoints.length - 1], true);
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            handler.setInputAction(function (click) {
                tempPoints = [];
                clearEffects();
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
    }

    function drawPoint(point) {
        var entity = 
        viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(point.lon, point.lat),
            label: {
                        text: '',
                        font: '22px Helvetica'
                    },
            point: {
                pixelSize: 10,
                color: Cesium.Color.CHARTREUSE
            }
        });
        tempEntities.push(entity);
    }

    function drawLine(point1, point2, showDistance) {
        var entity =
        viewer.entities.add({
            polyline: {
                positions: [Cesium.Cartesian3.fromDegrees(point1.lon, point1.lat), Cesium.Cartesian3.fromDegrees(point2.lon, point2.lat)],
                width: 10.0,
                material: new Cesium.PolylineGlowMaterialProperty({
                    color: Cesium.Color.CHARTREUSE.withAlpha(.5)
                })
            }
        });
        tempEntities.push(entity);
        if (showDistance) {
            var w = Math.abs(point1.lon - point2.lon);
            var h = Math.abs(point1.lat - point2.lat);
            var offsetV = w >= h ? 0.0005 : 0;
            var offsetH = w < h ? 0.001 : 0;
            var distance = getFlatternDistance(point1.lat, point1.lon, point2.lat, point2.lon);
            entity =
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(((point1.lon + point2.lon) / 2) + offsetH,
                    ((point1.lat + point2.lat) / 2) + offsetV),
                    label: {
                        text: distance.toFixed(1) + 'm',
                        font: '22px Helvetica',
                        fillColor: Cesium.Color.WHITE
                    }
                });
            tempEntities.push(entity);
        }
    }

    function drawPoly(points) {
        var pArray = [];
        for (var i = 0; i < points.length; i ++) {
            pArray.push(points[i].lon);
            pArray.push(points[i].lat);
        }
        var entity =
        viewer.entities.add({
            polygon: {
                hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(pArray)),
                material: Cesium.Color.CHARTREUSE.withAlpha(.5)
            }
        });
        tempEntities.push(entity);
    }

    //计算两点间距离
    function getFlatternDistance(lat1, lng1, lat2, lng2) {
        var EARTH_RADIUS = 6378137.0;    //单位M
        var PI = Math.PI;

        function getRad(d) {
            return d * PI / 180.0;
        }
        var f = getRad((lat1 + lat2) / 2);
        var g = getRad((lat1 - lat2) / 2);
        var l = getRad((lng1 - lng2) / 2);

        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);

        var s, c, w, r, d, h1, h2;
        var a = EARTH_RADIUS;
        var fl = 1 / 298.257;

        sg = sg * sg;
        sl = sl * sl;
        sf = sf * sf;

        s = sg * (1 - sl) + (1 - sf) * sl;
        c = (1 - sg) * (1 - sl) + sf * sl;

        w = Math.atan(Math.sqrt(s / c));
        r = Math.sqrt(s * c) / w;
        d = 2 * w * a;
        h1 = (3 * r - 1) / 2 / c;
        h2 = (3 * r + 1) / 2 / s;

        return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
    }

    //计算多边形面积
    var earthRadiusMeters = 6371000.0;
    var radiansPerDegree = Math.PI / 180.0;
    var degreesPerRadian = 180.0 / Math.PI;
    function SphericalPolygonAreaMeters(points) {
        var totalAngle = 0;
        for (var i = 0; i < points.length; i++) {
            var j = (i + 1) % points.length;
            var k = (i + 2) % points.length;
            totalAngle += Angle(points[i], points[j], points[k]);
        }
        var planarTotalAngle = (points.length - 2) * 180.0;
        var sphericalExcess = totalAngle - planarTotalAngle;
        if (sphericalExcess > 420.0) {
            totalAngle = points.length * 360.0 - totalAngle;
            sphericalExcess = totalAngle - planarTotalAngle;
        } else if (sphericalExcess > 300.0 && sphericalExcess < 420.0) {
            sphericalExcess = Math.abs(360.0 - sphericalExcess);
        }
        return sphericalExcess * radiansPerDegree * earthRadiusMeters * earthRadiusMeters;
    }

    /*角度*/
    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 clearDrawingBoard() {
    <!-- viewer.entities.removeAll(); -->
        var primitives = viewer.entities;
            for (i = 0; i <  tempEntities.length; i++) {
                primitives.remove(tempEntities[i]);
        }
        tempEntities=[];
        clearEffects();
    }

  </script>
</body>
</html>

 

绛门人
关注
专栏目录
Cesium 空间量算——面积量算
虎康的博客
09-20 412
Cesium 空间量测——面积量算，对所选点圈住的内容进行面积量算
Cesium 空间量算——距离量算
虎康的博客
09-19 1058
在按下鼠标左键开始绘制第一个点之后，测距工具将会创建一个用于显示测距结果的线段、标签等元素。测量结果将实时更新，直到鼠标左键抬起。类创建自定义的测距工具，这样可以根据具体需求进行更加详细的设置，例如支持多线段测量等。具体使用方法可以参考Cesium官方文档。实际开发中我们经常需要用到量测工具，而Cesium没有直接提供量测功能，如何在 Cesium 中实现两点间距离测量。在Cesium中，可以使用。类进行测距外，还可以使用。
Cesium量算
01-25
Cesium量算，实现在Cesium地图上点击几个点，然后计算这根线的长度。
Cesium地图展示技术：坐标、比例尺与海拔效果实现
最新发布
weixin_31163455的博客
09-08 1434
本文还有配套的精品资源，点击获取 简介：Cesium是一个开源JavaScript库，用于创建Web浏览器中的3D地球和地理空间应用程序。本文探讨了如何利用Cesium库展示地图上的坐标、比例尺和海拔高度等关键元素。讲解了如何通过API实现坐标转换、比例尺调整和地形渲染，提供了关于 Cartesian3 对象、 scaleToGeodeticSurfa...
cesium实现面积测量
12-04 4140
MeasureManager.js 测试：
Cesium绘制点线面以及面积测量
06-05
两个Cesium两个drawhelper库，具体使用可参考工程代码，积分需求自己变得好高，手动修改低了。
cesium面积计算_cesium-长度测量和面积测量
weixin_29056781的博客
02-06 937
(更新)多谢网友的提醒，面积测量的小问题已经修改，经测试可正常使用网上找的大神的实现方法有点问题，实现有一些bug，作为cesium新手一个，弃之不忍，只好硬着头皮修改了，不过还好问题不大，再次mark一下，下次就可以直接用了image.pngimport Cesium from "cesium/Cesium";import widgets from "cesium/Widgets/widgets...
Cesium之【空间面积】测量
Alice
08-22 8060
空间面积测量对象是平面，考虑到了取点的高度；地表面积测量的是球体（地球）曲面  //****************************测量空间面积************************************************// var measureAreaSpace = function (viewer, handler){ handler = new Cesi...
cesium测量距离、面积
10-27
在“cesium测量距离、面积”的主题中，我们主要关注如何利用Cesium进行空间测量，包括测量直线距离和计算平面区域的面积。Cesium提供了丰富的API和功能来实现这些操作，对于地理数据的分析和应用具有极大的价值。 1...
Cesium基础-表面面积量算（依地形量算、依模型表面量算）
lying_19的博客
03-13 3153
Cesium+turf.js实现依地形和模型表面面积量算。
Cesium量算点线面
03-16
为了实现量算功能，可以利用`Cesium.Cartesian3.distance()`方法计算两个点之间的距离。用户可以通过鼠标点击或触摸屏幕来确定点的位置，然后动态计算两点之间的距离。 3. **量算线** 线的绘制通常涉及`Cesium....
cesium 距离测量 面积测量
07-15
代码直接写在html文件中，打开即用。通过三个按键分别实现距离测量、面积测量以及清除，距离测量、面积测量时左键添加点，右键结束添加，会自动计算距离或者面积，清除之后清除点要素线要素以及显示的面积和距离。
cesium 量算
2301_78814180的博客
01-03 419
【代码】cesium 量算。
Cesium学习笔记——及时计算多边形面积
DarkAfraid的博客
08-06 4030
一个可点击选择位置的以创建多边形的entities，并且对这个entities进行面积的计算。 提供Cesium的网址，以作参考：https://cesiumjs.org/ 具体如图： 下面是script部分的代码，细节有注释，html部分的自己发挥,viewer本文是在全局引入，根据自己情况设置 <script> export default { ...
cesium面积测量
泽洋数字有限公司的钱奴
08-06 549
使用方法新建一个文件measureArea.js将下面代码贴上去。
Cesium量算-贴地形距离
TA_Studio的博客
01-10 1359
Cesium贴地行距离测量，查了很多贴地距离计算的，但试了下都测不准，自己写了一个比较实用的。
Cesium：实现动态画多边形并测量面积
KaiSarH
03-04 3323
Cesium实现动态画多边形并测量面积
超图Cesium量算
软考鸭
08-05 1415
Cesium.MeasureHandler 提供面积量算、距离量算、高度量算功能。 new Cesium.MeasureHandler(viewer, mode) 其中mode值可以为： Cesium.MeasureMode.Area ：面积模式 Cesium.MeasureMode.Distance ： 距离量算模式 Cesium.MeasureMode.DVH ： 空间距离、水平距离、垂直距离三分量量算模式。 ##方法： activate() 激活 deactivate() 关闭 clear(.
cesium贴地面积量算代码
08-10
以下是一个简单的示例代码，用于计算Cesium中贴地面的区域的面积： ```javascript // 导入Cesium.js库 import * as Cesium from 'cesium/Cesium'; // 创建Cesium Viewer对象 const viewer = new Cesium.Viewer('...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值