CesiumJS技术问询：如何让Billboard始终显示在最上层？

可行，以下是几种实现方案，按需选择：

1. 利用zIndex属性设置渲染优先级 #

Cesium 1.70及以上版本支持Billboard的zIndex属性，设置一个足够大的值即可让它在渲染时优先于其他实体：

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  billboard: {
    image: 'path/to/your/image.png',
    zIndex: Number.MAX_SAFE_INTEGER // 设为最大安全整数，确保层级最高
  }
});

这个方法最简单，适合大多数场景。

2. 分离Billboard到独立渲染图层 #

如果需要更精细的层级控制，可以将Billboard单独放在一个EntityCollection，并调整渲染顺序让它最后渲染（自然显示在最上层）：

// 创建专属Billboard的实体集合
const billboardCollection = new Cesium.EntityCollection();
// 将集合添加到场景图元
viewer.scene.primitives.add(new Cesium.EntityCluster({ entities: billboardCollection }));
// 调整渲染顺序，让Billboard图层在所有其他图元之后渲染
viewer.scene.primitives.lowerToBottom(viewer.scene.primitives.get(viewer.scene.primitives.length - 1));

// 向专属集合添加Billboard
billboardCollection.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  billboard: {
    image: 'path/to/your/image.png'
  }
});

3. 禁用深度测试（配合可见性判断） #

通过禁用Billboard的深度测试，让它忽略场景中的深度信息直接绘制在屏幕最上层。但要注意，此时即使Billboard被地球遮挡也会显示，所以需要结合可见性判断动态控制：

viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  billboard: {
    image: 'path/to/your/image.png',
    disableDepthTestDistance: new Cesium.CallbackProperty(() => {
      const currentPos = this.position.getValue(viewer.clock.currentTime);
      // 判断Billboard是否在相机可见范围内
      const isVisible = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, currentPos) !== undefined;
      // 可见时禁用深度测试，不可见时恢复
      return isVisible ? Number.POSITIVE_INFINITY : 0;
    }, false)
  }
});

这个方案完美匹配你“位置不可见时不强制显示”的需求。

内容的提问来源于stack exchange，提问作者Eric G