Cesium 测距功能实现

2,132 阅读1分钟

测距基本原理

  1. 画点
  2. 画线
  3. 计算地面距离
  4. 每段线添加长度提示标签
  5. 双击或右击清除以上所有要素

调出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);