Cesium三维地形等高线生成实战：原理剖析与性能优化指南

1次阅读

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

Cesium 的 TerrainProvider 虽然提供了高效的地形渲染能力，但原生不支持等高线生成。对比其他方案：

Three.js：需要手动处理 DEM 数据，计算复杂度高但灵活性更强
Mapbox GL：内置等高线生成但无法与 Cesium 地形系统直接集成
Turf.js + Cesium：本文推荐的轻量级方案，平衡计算效率与渲染性能

使用 Cesium.sampleTerrainMostDetailed 获取地形采样点高程值，注意需转换为 GeoJSON 格式供 Turf 处理：

/**
 * 获取地形高程网格数据
 * @param viewer Cesium 视图实例
 * @param bounds [west, south, east, north] 范围
 * @param gridSize 采样网格尺寸
 */
async function fetchHeightData(
  viewer: Cesium.Viewer,
  bounds: number[],
  gridSize: number
) {
  const positions = Cesium.Cartesian3.fromDegreesArray(// 生成网格点坐标);
  const samples = await Cesium.sampleTerrainMostDetailed(
    viewer.terrainProvider,
    positions
  );
  // 转换为 Turf.js 支持的 GeoJSON 格式...
}

利用 turf.isolines 生成等高线，时间复杂度 O(n)取决于采样点数量：

/**
 * 生成等高线 FeatureCollection
 * @param heightData 高程数据 FeatureCollection
 * @param interval 等高距(米)
 */
function generateContours(
  heightData: turf.FeatureCollection,
  interval: number
) {
  const min = /* 计算最小高程 */;
  const max = /* 计算最大高程 */;

  return turf.isolines(heightData, 
    Array.from({length: (max-min)/interval}, (_,i) => min + i*interval)
  );
}

将计算密集型任务移至 Worker 线程：

// main.js
const worker = new Worker('contour-worker.js');
worker.postMessage({
  type: 'generate',
  data: heightData,
  interval: 20
});

// contour-worker.js
self.onmessage = (e) => {if(e.data.type === 'generate') {const contours = generateContours(e.data.data, e.data.interval);
    self.postMessage(contours); // 注意坐标序列化问题
  }
};

通过 PrimitiveCollection 合并绘制调用，减少 GPU 状态切换：

const primitive = new Cesium.Primitive({
  geometryInstances: contours.map(contour => 
    new Cesium.GeometryInstance({
      geometry: new Cesium.PolylineGeometry({
        positions: /* 转换坐标 */,
        width: 2.0
      })
    })
  ),
  appearance: new Cesium.PolylineMaterialAppearance({material: Cesium.Material.fromType('Color')
  })
});

利用 Cesium.BoundingSphere 实现空间索引：

contours.forEach(contour => {
  contour.properties._boundingSphere = 
    Cesium.BoundingSphere.fromPoints(/* 顶点坐标 */);
});

// 在更新循环中检查可见性
if(!viewer.camera.frustum.intersectsSphere(boundingSphere)) {return; // 跳过不可见区域}

根据视距动态调整等高线密度：

function updateLOD() {
  const distance = Cesium.Cartesian3.distance(
    viewer.camera.position,
    centerPosition
  );

  if(distance > 10000) {contourInterval = 100; // 低精度模式} else {contourInterval = 20; // 高精度模式}
}