Cesium加载地形数据后Label标注跟随相机移动问题的解决方案

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

背景痛点

在使用 Cesium 开发 3D 地理信息应用时，经常会遇到这样的问题：当加载了地形数据后，场景中的 Label 标注会随着相机的移动而上下浮动。这种表现会严重影响用户体验，尤其是在需要精确定位标注的场景中。具体表现包括：

• 当相机俯仰角度变化时，标注会沿地形表面滑动
• 缩放视图时，标注高度会发生不稳定的变化
• 标注与地面的视觉关联性被破坏，难以建立准确的定位认知

这个问题源于 Cesium 中坐标系统和高度参考的默认配置方式，需要深入理解其工作原理才能找到合适的解决方案。

技术分析

Cesium 中有三种主要的高度参考模式：

1. NONE：忽略地形高度，使用绝对高度
2. CLAMP_TO_GROUND：将位置固定在地形表面
3. RELATIVE_TO_GROUND：相对于地形表面的固定高度

当 Label 标注使用默认设置时，其高度参考通常是 NONE，这意味着它会在世界坐标系中保持固定高度。但当相机移动时，由于透视投影的变化，标注与地形之间的相对位置关系就会发生变化，造成视觉上的 ” 跟随 ” 效果。

解决方案

1. 使用 heightReference 设置高度参考模式

viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
  label: {
    text: '固定标注',
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
  }
});

2. 配置 verticalOrigin 确定标注垂直位置

viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
  label: {
    text: '优化位置标注',
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    style: Cesium.LabelStyle.FILL_AND_OUTLINE
  }
});

3. 结合 terrainProvider 进行地形适配

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
  url: 'https://assets.agi.com/stk-terrain/world',
  requestVertexNormals: true
});

完整代码示例

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

// 添加固定到地面的标注
viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
  label: {
    text: '费城',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    pixelOffset: new Cesium.Cartesian2(0, -10)
  }
});

// 添加相对于地面的标注
viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-74.0059728, 40.7127753, 50),
  label: {text: '纽约 (50m 高)',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth: 2,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
    pixelOffset: new Cesium.Cartesian2(0, -10)
  }
});

性能考量

不同解决方案对性能的影响：

1. CLAMP_TO_GROUND 模式：
2. 优点：标注位置最稳定

3. 缺点：需要实时计算地形高度，性能开销较大

4. RELATIVE_TO_GROUND 模式：

5. 优点：性能较好，适合大量标注

6. 缺点：当地形起伏较大时，可能出现标注被遮挡问题

7. NONE 模式：

8. 优点：性能最好
9. 缺点：标注会随相机移动

避坑指南

常见错误配置及解决方法：

1. 标注位置不稳定 ：
2. 错误：未设置 heightReference

3. 解决：明确指定 CLAMP_TO_GROUND 或 RELATIVE_TO_GROUND

4. 标注被地形遮挡 ：

5. 错误：使用 RELATIVE_TO_GROUND 但高度设置过低

6. 解决：增加高度值或改用 CLAMP_TO_GROUND

7. 标注方向不正确 ：

8. 错误：verticalOrigin 设置不当
9. 解决：根据需求选择 BOTTOM、CENTER 或 TOP

进阶建议

优化大量标注显示性能的方法：

1. 使用批处理技术减少绘制调用
2. 根据视距动态调整标注密度
3. 实现标注的 LOD(Level of Detail) 管理
4. 使用 Web Worker 进行地形高度预计算
5. 对静态标注使用 Primitive API 而非 Entity API

通过合理配置高度参考和垂直原点，结合性能优化策略，可以构建既美观又高效的 3D 地理信息标注系统。实际项目中应根据具体需求在稳定性和性能之间找到平衡点。