面积测量
关键引入文件：
- 第一步：引入框架地图关键文件
- 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
- 第二步：引入面积测量API文件
- https://mhc.ixiera.com/mhc/mchmap/measureArea/js/measureArea.min.js
1.初始化
var measureArea = new MeasureArea(viewer);
实例代码：
// 极简调用
var measureArea = new MeasureArea(viewer);
measureArea.startCreate(); // 开启绘制
2.参数说明：
viewer：创建的view实例。
绘制操作说明：开启绘制后，鼠标在地图上左键点击移动绘制多边形，右键点击完成绘制自动计算面积。
3.startCreate开启绘制
实例：measureArea.startCreate(drawType);
参数说明：
drawType{string} - 绘制类型（自定义参数，可用于区分不同测量场景）。
4.closeCreate关闭绘制
实例：measureArea.closeCreate();
5.监听绘制结束事件
实例：measureArea.DrawEndEvent.addEventListener((entity, cartesianArr, lngLatArr, area, areaText, drawType) => {
//执行自定义操作
});
参数说明：
entity{Array} - 实体多边形+label实体。
cartesianArr{Array} - 笛卡尔坐标集合
lngLatArr{Array}- 经纬度坐标集合
area{number}- 面积值
areaText{string}- 面积+单位
drawType{string} - 绘制类型（自定义参数，可用于区分不同测量场景）。
6.addAreaFromLngLat直接传入经纬度数组绘制多边形并显示面积
实例：var res = measureArea.addAreaFromLngLat(lngLatArr);
参数说明：
lngLatArr {Array} - 经纬度坐标数组，格式：[[lng1, lat1,h], [lng2, lat2,h], ..., [lngN, latN,h]]
res {Object} 返回值：包含多边形实体、面积值、所有实体的结果对象。
res.polygonEntity 多边形实体
res.labelEntity面积标签实体
res.area面积数值（平方公里）
res.areaText面积文本（带单位）
res.lngLatArr原始经纬度数组
res.cartesianArr笛卡尔坐标数组
7.getArea直接传入经纬度数组计算面积
实例：var res = measureArea.getArea(data);
参数说明：
data {Array} - 多边形顶点坐标数组，格式：[[lng1, lat1,h], [lng2, lat2,h], ..., [lngN, latN,h]]
res {number} 返回值：面积值（单位：平方公里）
8.show显示/hide隐藏
显示实例：measureArea.show();
隐藏实例：measureArea.hide();
9.destroy销毁
实例：measureArea.destroy();
10.toggle切换显示状态
实例：measureArea.toggle();
11.完整代码实例
<style>
body, html { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#cesiumContainer { width: 100vw; height: 100vh; }
.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;
}
</style>
<div id="cesiumContainer"></div>
<div class="btnsBox">
<button onclick="toStartCreate()">开启绘制</button>
<button onclick="setLnglat()">直接传入经纬度数组绘制多边形并显示面积</button>
<button onclick="toArea()">直接传入经纬度数组计算面积</button>
<button onclick="toToggle()">切换显示状态</button>
<button onclick="toHide()">隐藏</button>
<button onclick="toShow()">显示</button>
<button onclick="toDestroy()">销毁</button>
</div>
<script>
// 1. 初始化Cesium Viewer
const view3D = MchCesium.init('cesiumContainer', true);
const viewer = MchCesium.viewer;
// 可选：设置相机视角
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(116.20, 39.95, 1000.0),
orientation: { heading: 0, pitch: Cesium.Math.toRadians(-10), roll: 0 }
});
// 2. 初始化测量区域面积（即贴地面积）
var measureArea = new MeasureArea(viewer);
// 开启绘制
function toStartCreate(){
measureArea.startCreate('mmm');
// 标绘完成返回数据
measureArea.DrawEndEvent.addEventListener((entity,positions) => {
console.log('开启绘制事件 -- 触发结束事件')
console.log({entity, positions });
});
}
// 直接传入经纬度数组绘制多边形并显示面积
function setLnglat(){
var data1 = [
[
116.168012,
39.998257,
634.402
],
[
116.177048,
40.003129,
370.853
],
[
116.181895,
39.977166,
448.186
],
[
116.172537,
39.983519,
420.693
],
[
116.172537,
39.983519,
420.693
]
]
var data = [
[
116.178012,
39.998257,
20
],
[
116.187048,
40.003129,
20
],
[
116.191895,
39.977166,
20
],
[
116.182537,
39.983519,
20
],
[
116.182537,
39.983519,
20
]
]
var res = measureArea.addAreaFromLngLat(data);
console.log(res)
var res1 = measureArea.addAreaFromLngLat(data1);
console.log(res1)
}
// 切换显示状态
function toToggle(){
measureArea.toggle();
}
// 隐藏
function toHide(){
measureArea.hide();
}
// 显示
function toShow(){
measureArea.show();
}
// 销毁
function toDestroy(){
measureArea.destroy();
console.log(measureArea);
}
// 直接传入经纬度数组计算面积
function toArea(){
var data = [
[
116.178012,
39.998257,
20
],
[
116.187048,
40.003129,
20
],
[
116.191895,
39.977166,
20
],
[
116.182537,
39.983519,
20
],
[
116.182537,
39.983519,
20
]
]
var res = measureArea.getArea(data);
console.log(res)
console.log('计算面积结果：'+res+'平方公里');
}
</script>
</xmp>
12.效果展示
Demo地址：
返回顶部
热线电话
微信
扫一扫