//
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask: true, // 请求海岸线水效果
requestVertexNormals: true // 请求光照法线数据
});
离线地形:通过CesiumTerrainProvider加载本地切片(如CTB工具生成的terrain文件夹)
viewer.terrainProvider = new Cesium.CesiumTerrainProvider({ url: './local_terrain_tiles' }); 2.场景初始化
const
terrainProvider: Cesium.createWorldTerrain(),
baseLayerPicker: false // 简化基础图层选择
});
3.地形夸张效果(可选)
viewer.scene.terrainExaggeration
二、关键技术点
- 地形精度优化
LOD控制 :通过viewer.scene.globe.maxScreenSpaceError降低远距离地形精度(默认2.0,值越低越精细) 裁剪优化 :启用viewer.scene.globe.depthTestAgainstTerrain确保实体与地形精准贴合 2.地形水面融合
viewer.scene.globe.oceanNormalMapUrl
viewer.scene.globe.enableLighting = true; // 开启光照增强立体感
3.自定义地形着色器
通过CustomShader修改地形渲染效果(如夜间热力图):
const
uniforms: {
u_time: { value: 0 }
},
fragmentShaderText: `
void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
float height = fsInput.attributes.positionMC.z;
material.diffuse = mix(vec3(0,0,1), vec3(1,0,0), height/1000.0);
}`
});
viewer.scene.globe.customShaders = [terrainShader];
三、性能优化方案
策略 | 实现方式
| 地形预加载 | viewer.scene.globe.preloadSiblings = true 提前加载相邻瓦片 | | 动态分辨率适配 | viewer.scene.dynamicScreenSpaceError = true 根据帧率自动调整细节层次 | | 地形剔除优化 | viewer.scene.camera.frustumSplits = [0.01, 0.1, 0.5, 1.0] 分级裁剪远距离地形
四、常见问题解决
-
地形闪烁问题 :
启用viewer.scene.farToNear = true优化深度缓冲区冲突 -
白膜地形(无纹理) :
检查地形服务是否包含availability属性,确保瓦片范围正确 -
坐标偏移问题 :
使用Cesium.Transforms.headingPitchRollToFixedFrame校正局部坐标系五、扩展应用
- 地形挖洞分析
使用ClippingPlane切割地形剖面:
const
viewer.scene.globe.clippingPlanes = new Cesium.ClippingPlaneCollection({ planes: [clippingPlane] });
2.动态地形修改
通过GeometryInstance实时修改地形高程:
const
position: Cesium.Cartesian3.fromDegrees(116.39, 39.9),
ellipse: {
semiMinorAxis: 5000,
semiMajorAxis: 5000,
height: -50 // 下压地形50米
}
});