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

1次阅读

没有评论

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

Cesium 的地形系统基于 TerrainProvider 抽象类实现，其核心是 Quantized-Mesh 格式——一种为 WebGL 优化的流式地形数据规范。理解以下关键点对等高线生成至关重要：

层级分块 ：全球地形被切割成0-15 级瓦片，遵循 GeographicTilingScheme 空间索引
数据编码 ：高程值采用quantized vertices + oct-encoded normals 压缩存储（1:5000 精度）
高程基准 ：默认使用EGM96 大地水准面，需注意与 WGS84 椭球高的转换

直接从 Quantized-Mesh 提取的高程是相对值，需要还原为真实海拔。典型误差来源包括：

瓦片边界处的精度损失（相邻瓦片可能相差 0.5 米）
海洋区域特殊值处理（-1000 标记需过滤）
坐标系转换时的 Z 值缩放（WebGL clip space 到 WGS84）

实测表明：在 GTX1060 显卡上，百万级顶点地形直接计算等高线会导致帧率骤降至 8FPS。主要卡点在于：

CPU 端密集采样导致主线程阻塞
等高线顶点生成时的重复计算
WebGL 批次绘制调用过多

当地形发生编辑（如挖填方）时，传统预生成方案失效。必须实现：

增量式等高线更新（dirty rectangle 检测）
顶点缓冲区的部分更新机制
变化区域的 LOD 同步

// 从 Cesium 地形瓦片提取 DEM 矩阵
async function sampleHeightGrid(tile: Cesium.QuadtreeTile, resolution = 256) {const dem = new Float32Array(resolution * resolution);
  const cartographics = []

  // 构建采样点网格
  for(let y=0; y<resolution; y++) {for(let x=0; x<resolution; x++) {const uv = new Cesium.Cartesian2(x/(resolution-1), y/(resolution-1));
      const ray = tile.rectangle.sample(uv);
      cartographics.push(Cesium.Ellipsoid.WGS84.cartesianToCartographic(ray));
    }
  }

  // 批量查询高程（避免多次 pick）const heights = await Cesium.sampleTerrainMostDetailed(
    viewer.terrainProvider, 
    cartographics
  );

  // 存储为 DEM 矩阵
  heights.forEach((pos, idx) => {dem[idx] = pos.height;
  });

  return {
    data: dem,
    stepX: tile.rectangle.width / (resolution-1),
    stepY: tile.rectangle.height / (resolution-1)
  };
}

// 边界处理的等值线追踪（O(n)每条线）function traceContour(
  dem: Float32Array, 
  level: number, 
  width: number, 
  height: number
) {const contours: number[][] = [];
  const visited = new Uint8Array(dem.length);

  // 移动方向编码（右、下、左、上）const DIRS = [[1,0], [0,1], [-1,0], [0,-1]];

  for(let y=0; y<height-1; y++) {for(let x=0; x<width-1; x++) {
      const idx = y*width + x;
      if(visited[idx]) continue;

      // 检查是否跨越等值线（Marching Squares 条件）const a = dem[idx] > level ? 1 : 0;
      const b = dem[idx+1] > level ? 1 : 0;
      const c = dem[idx+width+1] > level ? 1 : 0;
      const d = dem[idx+width] > level ? 1 : 0;
      const caseKey = (a << 3) | (b << 2) | (c << 1) | d;

      if(caseKey !== 0 && caseKey !== 15) {const contour = [];
        let [cx, cy] = [x, y];
        let dir = 0;

        // 追踪闭环
        do {visited[cy*width + cx] = 1;
          contour.push(cx, cy);

          // 根据当前边选择移动方向
          const nextDir = (dir + 3) % 4; // 优先左转
          const [dx, dy] = DIRS[nextDir];
          const [nx, ny] = [cx + dx, cy + dy];

          if(checkCrossing(nx, ny, nextDir)) {
            dir = nextDir;
            [cx, cy] = [nx, ny];
          } else {dir = (dir + 1) % 4;
          }
        } while(cx !== x || cy !== y);

        contours.push(contour);
      }
    }
  }

  return contours;
}

class ContourPrimitive implements Cesium.Primitive {constructor(private contours: Vector3[][]) {}

  update(frameState: Cesium.FrameState) {
    const appearance = new Cesium.PolylineMaterialAppearance({material: Cesium.Material.fromType('Color')
    });

    const primitive = new Cesium.Primitive({
      geometryInstances: this.contours.map(pts => 
        new Cesium.GeometryInstance({
          geometry: new Cesium.PolylineGeometry({
            positions: pts,
            width: 2.0
          })
        })
      ),
      appearance,
      asynchronous: false
    });

    primitive.update(frameState);
  }
}

任务分割：将全球地形按 1°×1°网格分块提交 Worker
数据传输 ：使用Transferable Objects 传递 ArrayBuffer
负载均衡：动态调整 Worker 数量（navigator.hardwareConcurrency）

// 根据视距动态调整等高线密度
function getLodLevel(distance: number) {if(distance > 10000) return 100; // 低精度
  if(distance > 5000) return 50;
  return 20; // 高精度
}

对象池 ：复用Vector3 数组避免 GC 压力
瓦片卸载 ：监听tileUnload 事件释放对应等高线数据
显存回收 ：在contextLost 事件中重建 WebGL 资源

椭球面补偿：直接连接 WGS84 坐标会导致等高线 ” 悬空 ”，需投影到地形表面
国际日期线：跨越±180°经线时需分割线段
极区畸变 ：高纬度地区使用Web 墨卡托 辅助计算

增量加载：优先处理视锥体内的瓦片
精度分级：远距离使用 30m DEM，近距离切到 10m
流式传输 ：通过3D Tiles 分批加载等高线

viewer.scene.contextLost.addEventListener(() => {
  // 重建着色器程序
  contourMaterial.shaderProgram = null; 

  // 重传顶点数据
  contourPrimitive._va = null;
});