共计 3400 个字符，预计需要花费 9 分钟才能阅读完成。
理解 Cesium 地形系统架构
Cesium 的地形系统主要基于 TerrainProvider 接口实现，其中 QuantizedMesh 是其高效地形渲染的核心格式。这种格式通过将地形数据分块、量化、压缩，实现了大规模地形的流畅加载和渲染。然而，正是这种设计导致了 Cesium 原生不支持直接生成等高线：
- 数据离散化：QuantizedMesh 将连续地形离散化为三角网，丢失了原始 DEM 数据的规则网格结构
- 异步加载机制：地形数据按需分块加载，难以获取全局连续高程数据
- 性能权衡：实时计算等高线会破坏 Cesium 的地形渲染优化管线
等高线生成方案对比
1. 服务端预生成（Geoserver）
- 优点：计算压力在服务端，客户端只需加载渲染
- 支持复杂算法生成高质量等高线
- 可预先生成多级 LOD
- 缺点：
- 需要额外 GIS 服务器
- 动态更新困难
- 网络传输量大
2. 客户端实时计算（Turf.js 等库）
- 优点：
- 完全在浏览器端运行
- 可动态调整参数
- 无需服务端支持
- 缺点：
- 主线程计算会阻塞 UI
- 大数据量时性能差
- 移动端体验不佳
3. WebWorker 异步处理
- 优点：
- 不阻塞主线程
- 可利用多核 CPU
- 良好的响应式体验
- 缺点：
- 实现复杂度高
- 数据序列化开销
- 调试困难
完整实现示例（TypeScript）
1. 获取高程数据
// 获取矩形区域内的高程样本点
const sampleHeight = async (viewer: Cesium.Viewer, rectangle: Cesium.Rectangle) => {const positions = Cesium.Rectangle.subsample(rectangle, 0.01); // 采样间隔 0.01 弧度
const terrainProvider = viewer.terrainProvider;
try {
const updatedPositions = await Cesium.sampleTerrainMostDetailed(
terrainProvider,
positions
);
return updatedPositions.map(pos => pos.height);
} catch (error) {console.error('采样高程失败:', error);
return [];}
};2. Marching Squares 算法实现
/**
* 生成等高线
* @param heightData 二维高程数组[row][col]
* @param interval 等高距（米）*/
function generateContourLines(heightData: number[][],
interval: number
): Cesium.Cartesian3[][] {
// 1. 确定等高线层级
const minHeight = Math.min(...heightData.flat());
const maxHeight = Math.max(...heightData.flat());
const levels = [];
for (let h = minHeight; h <= maxHeight; h += interval) {levels.push(h);
}
// 2. 对每个层级应用 Marching Squares 算法
const contours: Cesium.Cartesian3[][] = [];
levels.forEach(level => {const lines = marchingSquares(heightData, level);
contours.push(...lines);
});
return contours;
}
// Marching Squares 核心算法（简化版）function marchingSquares(grid: number[][], isoLevel: number): Cesium.Cartesian3[][] {const lines: Cesium.Cartesian3[][] = [];
// 遍历网格单元
for (let y = 0; y < grid.length - 1; y++) {for (let x = 0; x < grid[0].length - 1; x++) {
// 计算单元格四个角的状态
const cellValues = [grid[y][x], // 左上
grid[y][x+1], // 右上
grid[y+1][x+1], // 右下
grid[y+1][x] // 左下
];
// 确定单元格配置（0-15）const config = cellValues.reduce((acc, val, idx) => {return acc | ((val >= isoLevel ? 1 : 0) << idx);
}, 0);
// 根据配置生成线段
const segment = createSegment(x, y, config, isoLevel, cellValues);
if (segment) lines.push(segment);
}
}
return lines;
}3. 两种渲染方式对比
Entity 方式：
// 适合少量等高线
viewer.entities.add({
polyline: {
positions: contourPositions,
width: 2,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.RED,
outlineWidth: 1,
outlineColor: Cesium.Color.WHITE
})
}
});Primitive 方式：
// 适合大规模等高线
const primitive = new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolylineGeometry({
positions: contourPositions,
width: 2,
vertexFormat: Cesium.PolylineColorAppearance.VERTEX_FORMAT
})
}),
appearance: new Cesium.PolylineColorAppearance({translucent: false})
});
viewer.scene.primitives.add(primitive);性能优化实战
地形 LOD 与等高线密度平衡
- 使用
Cesium.sampleTerrain时根据视距动态调整采样密度：const sampleStep = Cesium.Math.clamp( viewer.camera.positionCartographic.height / 1000, 0.001, 0.1 );
WebGL 绘制调用合并
- 将多条等高线合并到单个 GeometryInstance
- 使用相同的 Appearance 批量渲染
- 对静态等高线启用
allowPicking: false
内存管理
- 使用
destroy()方法释放资源：viewer.entities.removeAll(); viewer.scene.primitives.remove(contourPrimitive); contourPrimitive = undefined; - 对于动态更新的等高线，复用已有的 Entity/Primitive
避坑指南
坐标系转换
- Cesium 使用 WGS84 坐标系，而 GIS 数据常用 Web 墨卡托
- 转换示例：
// Web 墨卡托转 WGS84 const wgs84Pos = Cesium.Cartographic.fromCartesian(Cesium.WebMercatorProjection.unproject(mercatorPos) );
动态地形同步
- 监听地形 Provider 变化事件：
viewer.terrainProvider.readyPromise.then(() => {// 重新生成等高线});
移动端优化
- 降低采样密度
- 使用 Primitive 代替 Entity
- 禁用抗锯齿（FXAA）
进阶思考
- 动态颜色渐变：
- 基于高度值插值计算颜色
-
使用
PolylineMaterialProperty实现动态更新 -
GB 级数据处理：
- 采用分层分块策略
- 服务端预处理 + 客户端流式加载
- 使用 IndexedDB 缓存地形数据
通过本文介绍的方法，开发者可以构建出性能优异的 Cesium 等高线可视化方案。实际项目中还需要根据具体需求调整参数，特别是在处理超大规模地形时，合理的分块策略和数据流管理是关键。
正文完
