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

1次阅读

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

在使用 Cesium 进行三维场景开发时，加载地形数据后经常会遇到一个棘手的问题：Label 标注会随着相机的移动而飘忽不定，导致标注与地形表面产生视觉分离。这种现象在地形起伏较大的区域尤为明显，严重影响用户体验。本文将深入分析问题原因，并提供一个稳定可靠的解决方案。

当地形数据加载后，Label 标注默认是基于屏幕空间进行渲染的。这意味着无论地形如何起伏，标注的位置都是相对于屏幕固定的。这种设计在某些场景下是合理的，但在需要标注与地形表面保持相对位置时就会产生问题。

Entity.position：这是世界坐标系中的固定位置，不会随相机移动而变化
LabelGraphics.pixelOffset：这是相对于屏幕的偏移量，会随相机视角变化而产生位移

正是这两种属性的不同特性导致了标注与地形表面分离的现象。

核心思路是利用 Viewer.scene.postRender 事件来动态更新标注位置，使其始终与地形表面保持同步。以下是完整的 TypeScript 实现方案：

// 初始化 Viewer 时开启地形深度检测
const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain(),
  scene3DOnly: true
});

// 创建标注实体
const labelEntity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(-120.0, 40.0),
  label: {
    text: '动态地形标注',
    font: '14pt sans-serif',
    style: Cesium.LabelStyle.FILL,
    fillColor: Cesium.Color.WHITE,
    outlineColor: Cesium.Color.BLACK,
    outlineWidth: 2,
    pixelOffset: new Cesium.Cartesian2(0, -20) // 初始偏移
  }
});

// 添加防抖优化
let lastUpdate = 0;
const updateThreshold = 100; // 毫秒

viewer.scene.postRender.addEventListener(() => {const now = Date.now();
  if (now - lastUpdate < updateThreshold) return;

  lastUpdate = now;

  // 获取当前相机位置
  const cameraPosition = viewer.camera.position;

  // 转换坐标到地形表面
  const position = labelEntity.position.getValue(viewer.clock.currentTime);
  const cartographic = Cesium.Cartographic.fromCartesian(position);

  // 考虑地形高度
  const terrainHeight = viewer.scene.globe.getHeight(cartographic) || 0;
  cartographic.height = terrainHeight;

  // 重新计算屏幕位置
  const updatedPosition = Cesium.Cartesian3.fromRadians(
    cartographic.longitude,
    cartographic.latitude,
    cartographic.height
  );

  // 计算屏幕空间偏移
  const screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    viewer.scene,
    updatedPosition
  );

  if (screenPosition) {
    // 更新标注位置
    labelEntity.label.pixelOffset = new Cesium.Cartesian2(
      0,
      -20 - (cameraPosition.z / 1000) // 根据相机距离动态调整
    );
  }
});

频繁的位置计算可能会影响性能，特别是在标注较多的情况下。我们需要在精度和性能之间找到平衡：