1. 项目背景与核心需求

最近在做一个三维地理信息系统的升级项目，需要将原有的二维地图平台迁移到Cesium三维引擎上。团队选择了Cesium 1.19.11这个相对稳定的版本作为基础，但在实际开发中遇到了两个关键需求：

1. 需要加载客户提供的自定义影像数据（非标准WMTS/WMS服务）
2. 需要实现哈密地区高精度地形的可视化展示

这两个需求看似简单，但在Cesium中实现时却遇到了不少坑。经过两周的摸索和实践，终于总结出了一套可靠的解决方案，今天就把这些经验分享给大家。

2. 环境准备与基础配置

2.1 Cesium 1.19.11版本特点

选择1.19.11版本主要基于以下考虑：

• 这是1.x系列的最后一个稳定版本
• API接口相对成熟，文档完善
• 与后续2.x版本相比，对老旧浏览器的兼容性更好

安装方式推荐使用npm：

npm install cesium@1.19.11

2.2 基础场景初始化

在初始化Viewer时，有几个关键参数需要特别注意：

const viewer = new Cesium.Viewer('cesiumContainer', { imageryProvider: false, // 先不加载默认影像 baseLayerPicker: false, // 禁用底图选择器 terrainProvider: new Cesium.EllipsoidTerrainProvider() // 先用椭球体地形 });

重要提示：在开发自定义影像加载功能时，建议先禁用默认的imageryProvider，否则可能会与自定义影像层产生冲突。

3. 自定义影像加载实现

3.1 影像数据预处理

我们拿到的原始数据是GeoTIFF格式的卫星影像，需要经过以下处理步骤：

1. 使用GDAL进行坐标系统一：

gdalwarp -t_srs EPSG:4326 input.tif output.tif

2. 切片处理（使用gdal2tiles.py）：

gdal2tiles.py -z 10-18 -p raster output.tif tiles/

3.2 Cesium中加载自定义影像

处理后的切片可以通过UrlTemplateImageryProvider加载：

const customImagery = new Cesium.UrlTemplateImageryProvider({ url: 'tiles/{z}/{x}/{y}.png', credit: 'Custom Imagery Data', minimumLevel: 10, maximumLevel: 18, rectangle: Cesium.Rectangle.fromDegrees( 90.0, 40.0, // 西南角经度，纬度 95.0, 45.0 // 东北角经度，纬度 ) }); viewer.imageryLayers.addImageryProvider(customImagery);

3.3 性能优化技巧

1. 缓存策略：建议启用浏览器缓存，可以在nginx配置中添加：

location /tiles/ { expires 30d; add_header Cache-Control "public"; }

2. 渐进加载：设置适当的minimumLevel和maximumLevel，避免加载不必要级别的瓦片。

3. 内存管理：对于大范围影像，使用rectangle参数限制加载范围。

4. 哈密地形数据加载

4.1 地形数据获取与处理

哈密地区的地形数据来源于本地测量的DEM数据，处理流程如下：

1. 使用CESIUM Terrain Builder工具生成地形瓦片：

ctb-tile -f Mesh -C -o terrain dem.tif

2. 生成的地形瓦片目录结构：

terrain/ layer.json 0/0/0.terrain ...

4.2 CesiumTerrainProvider配置

const hamTerrain = new Cesium.CesiumTerrainProvider({ url: 'terrain/', requestVertexNormals: true, // 启用顶点法线 requestWaterMask: false // 哈密地区不需要水面效果 }); viewer.terrainProvider = hamTerrain;

4.3 地形夸张与样式调整

为了突出地形特征，可以设置地形夸张系数：

viewer.scene.terrainExaggeration = 1.5; // 1.5倍夸张

同时调整光照效果：

viewer.scene.globe.enableLighting = true; viewer.scene.light = new Cesium.DirectionalLight({ direction: new Cesium.Cartesian3(1.0, -1.0, -1.0) });

5. 常见问题与解决方案

5.1 影像加载问题排查

问题1：影像显示为黑色或空白

• 检查路径是否正确
• 确认切片格式是否为PNG/JPEG
• 验证rectangle参数是否包含当前视图范围

问题2：影像偏移

• 确认原始数据的坐标系是否正确
• 检查gdalwarp转换参数
• 验证切片时的zoom级别设置

5.2 地形加载问题排查

问题1：地形显示异常

// 添加错误监听 hamTerrain.readyPromise.catch(function(error) { console.error('地形加载失败:', error); });

问题2：性能低下

• 降低requestVertexNormals质量
• 减小terrainExaggeration值
• 使用更小的地形瓦片范围

6. 进阶优化方案

6.1 动态加载策略

对于大范围区域，可以实现基于视点的动态加载：

viewer.scene.postRender.addEventListener(function() { const cameraPosition = viewer.camera.position; // 根据相机位置动态加载影像和地形 });

6.2 内存管理技巧

定期清理不使用的瓦片：

viewer.scene.globe.tileCacheSize = 500; // 限制缓存瓦片数量

6.3 多LOD层级优化

对于远距离视图，可以使用低精度地形：

const terrainDetail = viewer.camera.positionCartographic.height > 10000 ? 0.5 : 1.0; viewer.scene.globe.terrainDetail = terrainDetail;

7. 项目总结与个人心得

在实际项目中，有几点经验值得分享：

1. 版本锁定：Cesium不同版本间API变化较大，建议锁定版本并仔细阅读对应版本的文档。

2. 数据预处理：90%的问题都出在数据准备阶段，务必确保：

   • 坐标系统一
   • 范围正确
   • 切片规范

3. 性能监控：开发过程中要持续关注内存使用情况，Cesium很容易消耗大量显存。

4. 渐进增强：建议先实现基本功能，再逐步添加优化措施。

这个方案在哈密地区的项目中运行良好，帧率保持在50-60FPS，内存占用稳定在1.5GB左右。对于需要自定义影像和地形加载的项目，这套方案应该能提供不错的参考价值。