cesium图标漂移分析与解决

漂移现象如下

什么是图标漂移？

随着视野改变，图标相对于地面发生了相对位置的变化

让人感觉到图标有飘忽不定的感觉

原因分析

图标是静止的，它的位置在世界坐标系中是绝对的、静止的。

漂移大部分的原因是：

透视关系发生了错乱，本该被遮挡的物体，现在却被看到了

当前环境

1、Cesium.js版本为1.110

2、环境中加载了地形

let worldTerrain = await Cesium.createWorldTerrainAsync();
viewer.scene.terrainProvider = worldTerrain;

解决方案

下述2个必须同时设置才会起作用！

1、打开全局的深度检测

viewer.scene.globe.depthTestAgainstTerrain = true;

这个属性默认是false，也就是说，默认情况下，图标不会被地形遮挡！！

2、把billboard的深度检测保持一直打开

const position = new Cesium.Cartesian3(
  -1371108.6511167218,
  -5508684.080096612,
  2901825.449865087
);
viewer.entities.add({
  position: position,
  billboard: {
    image: "../images/Cesium_Logo_overlay.png",
    disableDepthTestDistance: 0,//默认值就是0，不用特意设置
  },
});

存在问题

按照上述解决方案，会存在下述问题：

1、图标会出现“部分”被地形遮挡的问题

2、图标通过heightReference方式贴地的时候，存在问题：

图标刚被完全遮挡的时候，图标依然可见

const position = new Cesium.Cartesian3(
  -1371108.6511167218,
  -5508684.080096612,
  2901825.449865087
);
viewer.entities.add({
  position: position,
  billboard: {
    image: "../images/Cesium_Logo_overlay.png",
    disableDepthTestDistance: 0,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//使用这个属性，会导致某些时刻，地形遮挡结果错误
  },
});

参考链接

cesium官方的一个blog

和本文关系不大，但是可以帮助深入了解billboard的设计

Billboards and Labels on Terrain Improvements – Cesium