Cesium地形数据加载后Label标注跟随相机移动的解决方案与性能优化

1次阅读

共计 1887 个字符，预计需要花费 5 分钟才能阅读完成。

在 Cesium 中，地形数据和 Label 标注的渲染机制存在天然冲突。地形数据通常采用 LOD（Level of Detail）技术进行动态加载，而 Label 标注则默认以屏幕空间坐标渲染。这就导致当相机移动时，地形会动态更新，但 Label 标注却保持在屏幕固定位置，造成视觉上的不协调。

具体来说，问题主要体现在两个方面：

视觉混乱：Label 标注不再准确指向其关联的地形特征
性能下降：大量 Label 标注持续渲染，即使它们已经不在可视范围内

针对这个问题，我们主要考察了两种主流解决方案：

视锥剔除（Frustum Culling）
优点：能有效减少渲染负担，只显示视锥体内的 Label
缺点：需要手动管理 Label 的显隐状态，实现复杂度较高
动态位置更新
优点：实现简单，Label 能始终准确指向地形特征
缺点：需要每帧更新位置，对性能有一定影响

经过实践验证，我们推荐结合使用这两种方案：对静态标注使用动态位置更新，对大量动态标注则采用视锥剔除。

以下是基于 Cesium 1.9+ 的完整解决方案代码示例：

// 初始化 Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
  terrainProvider: new Cesium.CesiumTerrainProvider({url: 'https://assets.agi.com/stk-terrain/world'})
});

// 创建 Label 集合
const labels = viewer.scene.primitives.add(new Cesium.LabelCollection());

// 添加地形关联的 Label
function addTerrainLabel(position, text) {
  const label = labels.add({
    position: position,
    text: text,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    disableDepthTestDistance: Number.POSITIVE_INFINITY
  });

  // 动态更新位置
  viewer.scene.preUpdate.addEventListener(() => {const cartographic = Cesium.Cartographic.fromCartesian(label.position);
    const height = viewer.scene.globe.getHeight(cartographic);

    if (Cesium.defined(height)) {
      label.position = Cesium.Cartesian3.fromRadians(
        cartographic.longitude,
        cartographic.latitude,
        height
      );
    }
  });
}

// 添加示例标注
addTerrainLabel(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  '地形关联标注'
);

关键实现点说明：