地形挖掘分析
关键引入文件:
第一步:引入框架地图关键文件
- 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. 参数说明
| 参数 | 数据类型 | 默认值 | 说明 |
| viewer | Viewer 实例 | 必填 | MchCesium.viewer |
| positions | Array | 必填 | 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
扫一扫