距离测量

关键引入文件:

第一步:引入框架地图关键文件

  • https://mhc.ixiera.com/mhc/main_min.js
  • https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js
  • https://mhc.ixiera.com/mhc/Cesium3DTile.js

第二步:引入距离测量文件

  • https://mhc.ixiera.com/mhc/mchmap/MeasureLine/js/measureLine.min.js

1. create 初始化

let measureLineInstance = new MeasureLine({viewer});

实例代码:

// 极简调用【2 行】

let measureLineInstance = new MeasureLine({viewer});

measureLineInstance.dataCreate(positions);

2. 参数说明

参数数据类型默认值说明
viewerViewer 实例必填MchCesium.viewer
positionsArray必填84 坐标数组,至少两个值
例:[ [116.58, 40.38 ,179.79], [116.59, 40.38 ,179.64], [116.59, 40.37 ,250.32], [116.58, 40.37 ,2200.48]]

3. startCreate手动创建折现并显示计算距离(手动绘制多边形)

measureLineInstance.startCreate();

4. dataCreate已有potions绘制折现并计算

measureLineInstance.dataCreate(positions); // positions 为 [[lng,lat,alt],...]地形坐标

5. terrainDistance (异步)两点贴地距离

await measureLineInstance.terrainDistance(position1) // position1 为 [[lng,lat,alt],[lng,lat,alt]]两点坐标

6. straightDistance 两点直线距离

measureLineInstance.straightDistance(position1) // position1 为 [[lng,lat,alt],[lng,lat,alt]]两点坐标

7. straightDistanceWithTerrainHeight (异步)去掉高度后再地形上的两点直线距离

await measureLineInstance.straightDistanceWithTerrainHeight(position1) // position1 为 [[lng,lat,alt],[lng,lat,alt]]两点坐标

8. 完整代码示例

<xmp>
        <script src="https://mhc.ixiera.com/mhc/main.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
        <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
        <script src="https://mhc.ixiera.com/mhc/mchmap/MeasureLine/js/measureLine.min.js"></script>
        <style>
            html,body,#cesiumContainer { width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
            .btnsBox {position: fixed;top: 10px;left: 10px;width: 70%;height: 30px;}
            .btnsBox button {background-color: #fff;border-radius: 2px;color: #333;line-height: 30px;margin-right: 15px;font-size: 12px;padding: 0 15px;cursor: pointer;}
            .cesium-button:focus {color: #000;fill: #000;background: #adf;border-color: #fff;box-shadow: 0 0 8px #fff;}
        </style>

        <div id="cesiumContainer"></div>
        <div class="btnsBox">
            <button onclick="createLine()">开始绘制线并计算</button>
            <button onclick="toLine()">已经有的positions进行绘制并计算</button>
            <button onclick="measure()">计算两点的距离</button>
        </div>

        <script>
            const view3D = MchCesium.init('cesiumContainer', true);
            const viewer = MchCesium.viewer;
            MchCesium.flyto(116.60057971642651, 40.339672348045744, 50, function () {
                console.log('flyto');
            })
            const positions = [
                [116.58, 40.38 ,179.79],
                [116.59, 40.38 ,179.64],
                [116.59, 40.37 ,250.32],
                [116.58, 40.37 ,2200.48]]
            var measureLineInstance
            async function toLine(){
                measureLineInstance = new MeasureLine({viewer});
                measureLineInstance.dataCreate(positions);
            }
            async function measure(){
                measureLineInstance = new MeasureLine({viewer});
                const position1 = [
                    [116.58, 40.38 ,179.79],
                    [116.59, 40.38 ,179.64]
                ]
                alert(`
                贴地距离:${await measureLineInstance.terrainDistance(position1)} 
                直线距离:${measureLineInstance.straightDistance(position1)}
                去掉高度后再地形上的直线距离:${await measureLineInstance.straightDistanceWithTerrainHeight(position1)}   
                `)
            }
            function createLine(){
                var measureLineInstance = new MeasureLine({viewer});
                measureLineInstance.startCreate();
                measureLineInstance.DrawEndEvent.addEventListener((entity,positions) => {
                    console.log('绘制结束回调')
                    console.log({entity, positions });
                });
            }
        </script>
        
    </xmp>

9. 效果展示

距离测量

Demo 地址:
https://mhc.ixiera.com/mhc/mchmap/MeasureLine/index.html

本文档来自—MCHMAP 丨 地图引擎平台