测距基本原理
- 画点
- 画线
- 计算地面距离
- 每段线添加长度提示标签
- 双击或右击清除以上所有要素
调出Cesium sandcastle的development模块
一般的Cesium sandcastle不会开放development模块,因为其更接近底层API,新手不容易理解,因此Cesium默认屏蔽了开发者模块中的示例,但是其实这些示例对我们深入理解Cesium很有必要。调出development模块的方法是:
从git上下载Cesium源代码,
cd Cesium源代码目录
npm build
node server.cjs
画点
let points = scene.primitives.add(
new Cesium.PointPrimitiveCollection()
);
points.add({
position: cartesian,
color: Cesium.Color.YELLOW
});
positions.push(cartesian);
if (positions.length < 2) {
return;
}
画线
vm.viewer.scene.primitives.add(
new Cesium.GroundPolylinePrimitive({
//贴地primitive线
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.GroundPolylineGeometry({
//贴地线几何
positions: positions
})
}),
appearance: new Cesium.PolylineMaterialAppearance({
material: Cesium.Material.fromType("Color", {
color: Cesium.Color.RED
})
})
})
);
计算两点之间的距离
let distance = 0,
s = 0;
for (let i = 0; i < positions.length - 1; i++) {
// debugger;
let p1 = Cesium.Cartographic.fromCartesian(positions[i]),
p2 = Cesium.Cartographic.fromCartesian(positions[i + 1]);
let geodesic = new Cesium.EllipsoidGeodesic();
geodesic.setEndPoints(p1, p2);
s = geodesic.surfaceDistance;
distance += s;
}
console.log("distance", distance);
添加标注
let lengthText = `${Math.round(distance/1000)}km`;
let labels = scene.primitives.add(new Cesium.LabelCollection());
labels.add({
position: positions[positions.length - 1],
text: lengthText,
font: '14px sans-serif',
});
双击或者右击结束
// 双击或者右击结束
handler.setInputAction(function(movement) {
console.log("关闭事件句柄-LEFT_DOUBLE_CLICK");
vm.viewer.scene.primitives.removeAll();
handler.destroy(); //关闭事件句柄
handler = null;
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);