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