Cesium三维地图生成实战：从数据加载到性能优化全解析

1次阅读

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

开发三维地图应用时，我们常常会遇到以下几个棘手的问题：

数据量大导致的加载延迟：三维地图数据通常包含地形、建筑、道路等多种要素，数据量往往达到 GB 级别，初次加载时容易造成明显的延迟。
复杂场景下的渲染性能瓶颈：当场景中包含大量实体（如成千上万的建筑模型）时，即使是最新的显卡也可能出现帧率下降的问题。
不同设备间的兼容性问题：从高端桌面电脑到中低端移动设备，硬件性能差异巨大，如何保证在各种设备上都能流畅运行是个挑战。

对比项	3D Tiles	传统瓦片地图
加载速度	渐进式加载，首屏快	完全加载后才能显示
内存占用	动态管理，按需加载	固定内存占用
渲染效率	基于 LOD 自动切换	固定分辨率
数据体积	更紧凑的二进制格式	图片格式占用更大空间
支持内容	支持复杂三维模型	仅支持二维 /2.5D

// 创建地形提供者
const terrainProvider = new Cesium.CesiumTerrainProvider({url: Cesium.IonResource.fromAssetId(1),
  requestWaterMask: true,  // 请求水掩模
  requestVertexNormals: true  // 请求顶点法线
});

// 应用到 viewer
viewer.terrainProvider = terrainProvider;

// 创建 LOD 层级的实体集
const buildingLODs = [
  {
    distance: 1000,
    model: 'lowpoly.glb',  // 低模
    scale: 1.0
  },
  {
    distance: 500,
    model: 'medium.glb',   // 中模
    scale: 1.0
  },
  {
    distance: 0,
    model: 'high.glb',     // 高模
    scale: 1.0
  }
];

// 根据距离切换模型
function updateLOD() {
  const cameraPosition = viewer.camera.position;
  entities.forEach(entity => {
    const distance = Cesium.Cartesian3.distance(
      cameraPosition,
      entity.position.getValue(viewer.clock.currentTime)
    );

    for (const lod of buildingLODs) {if (distance >= lod.distance) {
        entity.model = new Cesium.ModelGraphics({
          uri: lod.model,
          scale: lod.scale
        });
        break;
      }
    }
  });
}

// 每帧更新
viewer.scene.postUpdate.addEventListener(updateLOD);

// 创建自定义材质
const customMaterial = new Cesium.Material({
  fabric: {
    type: 'MyCustomMaterial',
    uniforms: {color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
      time: 0.0
    },
    source: `
      // 着色器代码
      czm_material czm_getMaterial(czm_materialInput materialInput) {czm_material material = czm_getDefaultMaterial(materialInput);

        // 随时间变化的颜色
        float pulse = sin(time) * 0.5 + 0.5;
        material.diffuse = color.rgb * pulse;

        // 添加边缘发光效果
        material.emission = vec3(0.3) * (1.0 - pulse);

        return material;
      }
    `
  }
});

// 应用到 primitive
primitive.appearance.material = customMaterial;

// 更新 uniforms
viewer.scene.postUpdate.addEventListener(() => {customMaterial.uniforms.time = viewer.clock.currentTime.secondsOfDay / 10.0;});

// 主线程代码
const worker = new Worker('dataLoader.js');

worker.onmessage = function(e) {const {type, data} = e.data;

  if (type === 'terrainData') {
    // 处理接收到的地形数据
    const terrainProvider = new Cesium.CesiumTerrainProvider({data: data});
    viewer.terrainProvider = terrainProvider;
  }
};

// 发送加载请求
worker.postMessage({
  type: 'loadTerrain',
  url: 'terrain.json'
});

// worker 线程 (dataLoader.js)
self.onmessage = async function(e) {if (e.data.type === 'loadTerrain') {const response = await fetch(e.data.url);
    const data = await response.json();

    self.postMessage({
      type: 'terrainData',
      data: data
    });
  }
};

// 创建视锥体检查器
const frustum = new Cesium.PerspectiveFrustum();

// 每帧检查
viewer.scene.postUpdate.addEventListener(() => {
  frustum.fov = viewer.camera.frustum.fov;
  frustum.aspectRatio = viewer.camera.frustum.aspectRatio;
  frustum.near = viewer.camera.frustum.near;
  frustum.far = viewer.camera.frustum.far;

  // 更新所有实体的可见性
  entities.forEach(entity => {const position = entity.position.getValue(viewer.clock.currentTime);
    const inFrustum = frustum.computeCullingPosition(
      viewer.camera.position,
      viewer.camera.direction,
      viewer.camera.up,
      position
    );

    entity.show = inFrustum;
  });
});

及时销毁不再使用的资源 ：对于不再显示的实体，调用entity.destroy() 释放资源
使用资源池：对于频繁创建销毁的同类对象，使用对象池技术
监控内存使用 ：定期检查Cesium.MemoryStatistics 获取内存使用情况
合理设置缓存大小 ：调整Cesium.Cache.size 控制内存占用

// 代理服务器配置示例
viewer.cesiumion.defaultAccessToken = 'your_token';

// 或者设置代理
Cesium.Resource.setDefaultProxy(new Cesium.DefaultProxy('/proxy/'));

降低默认分辨率 ：调整viewer.resolutionScale 为 0.5-0.7
简化 UI：使用 viewer.animation.container.style.visibility = 'hidden' 隐藏非必要 UI
禁用高精度效果：设置viewer.scene.globe.enableLighting = false
触摸事件优化 ：调整viewer.screenSpaceCameraController 的灵敏度参数

错误码	含义	解决方案
429	请求过多	实现请求队列，限制请求频率
404	资源不存在	检查资源路径和 Cesium ion 资产 ID
500	服务器错误	检查服务端日志，实现重试机制
WebGL 上下文丢失	显卡资源释放	实现上下文恢复处理程序