地形挖掘分析

关键引入文件:

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

  • 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/TerrainExcavation/js/TerrainExcavationAnalysis.min.js

1. create 初始化

let TerrainExcavation = new TerrainExcavationAnalysis({viewer: MchCesium.viewer,positions:positions});

实例代码:

// 极简调用【1 行】

let TerrainExcavation = new TerrainExcavationAnalysis({viewer: MchCesium.viewer,positions:positions});

2. 参数说明

参数数据类型默认值说明
viewerViewer 实例必填MchCesium.viewer
positionsArray必填84 坐标数组,至少三个值
例:[{lng: 116.59389742851513, lat: 40.38888930895767, alt: 179.79853280509525}, {lng: 116.60343500857853, lat: 40.38826109162844, alt: 179.6420964332951}, {lng: 116.60057971642651, lat: 40.379672348045744, alt: 250.3290487874367}, {lng: 116.59019924380435, lat: 40.37941219049445, alt: 220.48637670911108}]

3. show 显示 / hide 隐藏

显示:TerrainExcavation.show();

隐藏:TerrainExcavation.hide();

4. destroy 销毁

TerrainExcavation.destroy();

5.toggle切换显示状态

TerrainExcavation.toggle();

6. startCreate手动创建一个地形挖掘区域(手动绘制多边形)

方式一:(直接用)
TerrainExcavation.startCreate();
方式二:(回调返回绘制的点坐标集合)
TerrainExcavation.startCreate(function(points){
console.log('获取到绘制的点:', points); ==> [{lng,lat,alt}, ... ]
});

7. updateData

TerrainExcavation.updateData(positions); // positions 为 [{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/TerrainExcavation/js/TerrainExcavationAnalysis.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 class="cesium-button" onclick="startCreate()" title="绘制刨切">手动绘制刨切左上角开始顺时针</button>
            <button class="cesium-button" onclick="drawBoundary()" title="绘制固定剖切区域">绘制固定剖切区域</button>
            <button onclick="toHide()">隐藏</button>
            <button onclick="toShow()">显示</button>
            <button onclick="toToggle()">显示/隐藏</button>
            <button onclick="toDestroy()">销毁</button>
        </div>

        <script>
            const view3D = MchCesium.init('cesiumContainer', true);
                MchCesium.flyto(116.60057971642651, 40.339672348045744, 50, function () {
                console.log('flyto');
            })
            
            //划线对照 // 设置带高度的线
            let data2 = [
                { longitude: "116.592541", latitude: "40.387812", height: 300 },   //!!!!视为dxf文件中提取出的点,根据这个点集合算外轮廓(矩形),需要封装一个方法专门处理,轮廓点传给CreatePolygon,事件触发改代码触发
                { longitude: "116.6164", latitude: "40.3843", height: 350},                
            ]
            let option2 = {
                color: 'rgba(120, 112, 255, 1)', // 颜色
                width: 5, // 线宽
                editable: false, // 是否可编辑
                extData: { name: '带高度线-demo', type: '带高度线'}, // 自定义数据
                zIndex: 5, // 显示层级
                showHeight: true, // 显示高度
                showHeightLine: true, // 设置对高线
            }
            const positions = [{lng: 116.59389742851513, lat: 40.38888930895767, alt: 179.79853280509525},
                {lng: 116.60343500857853, lat: 40.38826109162844, alt: 179.6420964332951},
                {lng: 116.60057971642651, lat: 40.379672348045744, alt: 250.3290487874367},
                {lng: 116.59019924380435, lat: 40.37941219049445, alt: 220.48637670911108}]
            let polyline2 = new MchCesium.Polyline('line2', data2, option2)
                // 聚焦实体
            MchCesium.viewer.zoomTo(MchCesium.viewer.entities)

            let TerrainExcavation = new TerrainExcavationAnalysis({viewer: MchCesium.viewer,positions:positions});


            function startCreate() {
                TerrainExcavation = new TerrainExcavationAnalysis({viewer: MchCesium.viewer});
                TerrainExcavation.startCreate();
            }

            // 2. 直接按已有坐标开挖
            function drawBoundary() {
                TerrainExcavation = new TerrainExcavationAnalysis({viewer: MchCesium.viewer});
                TerrainExcavation.updateData(positions); // positions 为 [{lng,lat,alt},...]
            }

            // 3. 显示 / 隐藏 / 切换 / 销毁
            function toShow()   { TerrainExcavation.show(); }
            function toHide()   { TerrainExcavation.hide(); }
            function toToggle() { TerrainExcavation.toggle(); }
            function toDestroy(){
                TerrainExcavation.destroy();
                TerrainExcavation = null;
            }
        </script>
        
    </xmp>

9. 效果展示

视频墙效果

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

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