Cesium三维地形渲染

// 复制代码
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 复制代码

二、关键技术点

  1. 地形精度优化

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校正局部坐标系

    五、扩展应用

  1. 地形挖洞分析
    使用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米
    }
});
相关推荐
fthux1 天前
待办清单写满了,别忘了给休息留个位置:试试 Tick Rest
开源·github·mac·提醒·open source·消息提醒·tick rest·tick rest for mac·消息提醒app
啾咪orJIUMI1 天前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
FRing031 天前
vue2干货总结8(路由模块封装、router-link、声明式导航、路由重定向、编程式导航)
开发语言·前端·vue.js·vue2
GitHub实测笔记1 天前
dust 本机实测:/usr 扫树中位 92ms、du -sh 80ms;-s 不是汇总,稀疏文件 0→100Mi
github
逛逛GitHub1 天前
有个刚开源的 GitHub 项目有说法,竟然能在终端里再跑一台 Mac。
github
用户2991422196801 天前
GitHub 热榜项目:日榜(2026-11-09)
人工智能·开源·github
无懈可击1 天前
Vue 可视化AI表单设计器 FcDesigner v3.6 版本发布,支持导出 SQL功能!
vue.js·开源·ai编程
徐小夕1 天前
JitArchives,一款基于JitWord协同AI文档打造的企业级电子档案系统
前端·vue.js·github
特创数字科技1 天前
写了个 Windows 下载器:一键拉 GitHub / Gitee 源码,带 SHA256 校验
python·github
头发还在的女程序员1 天前
基于 Spring Boot + Vue 3 + uni-app 的灵活用工系统:四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统