cesium加载地形后获取地形的贴地高度

1.加载地图。

let viewer = new Viewer("cesiumContainer", {
    terrain: Terrain.fromWorldTerrain(), // 加载地形
    baseLayerPicker: false,
    shouldAnimate: true,
    infoBox: false,
    selectionIndicator: false,
})

2.先添加一个标注点，不设置高度，让他使用cesium中贴地设置，使得标注点贴地。

// 添加标注点
const addMark = () => {
  const entity = viewer.entities.add({
    position: Cartesian3.fromDegrees(114.397428, 25.90923, 0),
    point: {
      pixelSize: 10,
      color: Color.RED,
      heightReference: HeightReference.RELATIVE_TO_GROUND, // 贴地
    },
  });
  viewer.zoomTo(entity);
};

看效果：

3.去掉配置的贴地设置，设置高度大概500左右，看效果。

const addMark = () => {
  const entity = viewer.entities.add({
    position: Cartesian3.fromDegrees(114.397428, 25.90923, 500),
    point: {
      pixelSize: 10,
      color: Color.RED,
      // heightReference: HeightReference.RELATIVE_TO_GROUND, // 贴地
    },
  });
  viewer.zoomTo(entity);
};

效果：可以看出是漂浮在空中的。

如果有场景需要根据经纬度坐标获取贴地高度，这种标注的贴地设置在其他场景就不适用了。

可以根据 sampleTerrainMostDetailed 这个方法异步获取。

const getMapHeight = async (position: { lng: number; lat: number }) => {
  let positions = [Cartographic.fromDegrees(position.lng, position.lat)];
  const p = await sampleTerrainMostDetailed(
    viewer.terrainProvider,
    positions,
    true
  );
  console.log(p[0].height); // 地形贴地高度
  return p[0].height;
};

看效果：经纬度在（114.397428, 25.90923）这个点的贴地高度为447.3987。

获取高度的时候，浏览器会发一个异步请求，所以这个接口需要异步获取

现在将这个高度设置到标注点，看效果。

const addMark = () => {
  const entity = viewer.entities.add({
    position: Cartesian3.fromDegrees(114.397428, 25.90923, 447.398748),
    point: {
      pixelSize: 10,
      color: Color.RED,
      // heightReference: HeightReference.RELATIVE_TO_GROUND, // 贴地
    },
  });
  viewer.zoomTo(entity);
};

效果：

小结：sampleTerrainMostDetailed，是可以批量获取的。第一个参数是加载进地图的地形对象。第二个参数是position数组。第三个参数true的话，如果地形加载失败的话，会reject，如果false,地形加载失败的话，返回对象中高度是未定义。

适用场景就是图斑geojson，需要获取到这个图斑的每一个点的贴地高度来做逻辑的情况使用。千万别一个一个点获取，数量多的时候会发出大量的请求，消耗网络资源。合理使用批量获取。

// 抽成方法，根据经纬度集合获取单个点的贴地元素（贴地高度height）
    getMapHeightByArray = async (data) => {
        let positions = [];
        data.forEach((item) => {
            positions.push(Cesium.Cartographic.fromDegrees(item[0], item[1]));
        })
        const p = await Cesium.sampleTerrainMostDetailed(
            this.viewer.terrainProvider,
            positions,
            true
        );
        return p; // p[0].height， p[1].height...
    };