Cesium知识总结（一）

一、基础场景搭建

// 初始化Viewer时控制UI组件显隐
const viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,       // 禁用时间轴控件（优化界面空间）
  animation: false,      // 隐藏动画控件（减少视觉干扰）
  baseLayerPicker: false,// 关闭底图选择器（需手动管理图层）
  scene3DOnly: true,     // 强制3D模式（禁用2D和哥伦布视图）
  shouldAnimate: true    // 启用时间流动（影响动态数据展示）
});

// 加载Cesium Ion地形服务（全球地形+水面效果）
viewer.terrainProvider = Cesium.createWorldTerrain({
  requestWaterMask: true // 启用水域特效（需要ion权限）
});

关键API说明：

• Cesium.Viewer：三维场景入口容器

  • scene3DOnly: true 强制3D模式，避免2D/3D切换时的投影问题

  • shouldAnimate: true 允许时钟自动推进，影响时间相关实体的行为

• createWorldTerrain：快速加载Cesium全球地形服务

  • requestWaterMask: true 启用动态水面效果（需ion token授权）

---

二、3D模型加载与管理

// 通过Cesium Ion加载3D Tiles模型
const tileset = new Cesium.Cesium3DTileset({
  url: Cesium.IonResource.fromAssetId(69380), // 使用ion资产ID
  maximumScreenSpaceError: 2, // 控制渲染精度（值越小越精细）
  skipLevelOfDetail: true     // 启用LOD优化（提升加载性能）
});

// 模型加载完成回调（旧版本方案）
tileset.readyPromise.then(() => {
  viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0)); 
});

// 新版本加载状态检测方案
viewer.scene.postRender.addEventListener(() => {
  if (tileset.ready && !tileset.isDestroyed()) {
    console.log("模型包围球半径:", tileset.boundingSphere.radius);
  }
});

viewer.scene.primitives.add(tileset); // 添加到场景

核心参数解析：

• Cesium3DTileset：三维瓦片数据集加载器

  • maximumScreenSpaceError：像素级误差阈值，控制细节层次（默认16）

  • skipLevelOfDetail：启用LOD动态加载，提升大场景性能

• zoomTo：自动调整视角至模型包围球

  • HeadingPitchRange 参数控制初始视角（航向角、俯仰角、观察距离）

---

三、相机控制与状态保存

// 保存相机状态到localStorage
const saveCameraState = () => {
  const camera = viewer.camera;
  const state = {
    position: Cesium.Cartesian3.clone(camera.position), // 深拷贝位置
    orientation: { // 欧拉角参数
      heading: camera.heading, // 航向角（绕Z轴）
      pitch: camera.pitch,     // 俯仰角（绕Y轴）
      roll: camera.roll        // 翻滚角（绕X轴）
    }
  };
  localStorage.setItem('cameraState', JSON.stringify(state));
};

// 平滑过渡到保存的视角
const flyToSavedView = () => {
  const state = JSON.parse(localStorage.getItem('cameraState'));
  viewer.camera.flyTo({
    destination: state.position,
    orientation: state.orientation,
    duration: 3, // 动画时长（秒）
    easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT // 缓动曲线
  });
};

// 瞬间切换视角
const setCameraView = () => {
  const state = JSON.parse(localStorage.getItem('cameraState'));
  viewer.camera.setView({
    destination: state.position,
    orientation: state.orientation
  });
};

相机控制对比：

方法	特点	适用场景
flyTo	平滑过渡，支持缓动函数	用户交互、场景导览
setView	无动画立即切换	程序化视角控制

---

四、地表属性动态调整

// 配置地表透明度和光照
globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
  100,     // 最近距离（米）
  0.5,     // 最近处透明度
  1e5,     // 最远距离
  1.0      // 最远处透明度
);
globe.enableLighting = true; // 启用动态光照（昼夜效果）

// GUI控制器配置
const gui = new dat.GUI();
gui.add(globe, 'show').name('显示/隐藏地表');
gui.addColor({color: '#FFFF00'}, 'color').onChange(val => {
  globe.baseColor = Cesium.Color.fromCssColorString(val); // 地表颜色
}).name('地表颜色');

核心属性说明：

• NearFarScalar：距离相关标量插值器

  • 用于动态控制透明度、亮度等随着相机距离变化的属性

• enableLighting：启用光照计算

  • 实现昼夜变化效果，依赖场景时钟推进

---

五、坐标系转换实战

// 屏幕坐标→世界坐标（带地形检测）
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction((movement) => {
  const ray = viewer.camera.getPickRay(movement.position);
  const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
  console.log('点击位置三维坐标:', cartesian);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 经纬度→笛卡尔坐标
const position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 100);

// 笛卡尔→经纬度
const cartographic = Cesium.Cartographic.fromCartesian(position);
const lng = Cesium.Math.toDegrees(cartographic.longitude);
const lat = Cesium.Math.toDegrees(cartographic.latitude);

坐标系系统：

1. 屏幕坐标系：像素坐标（原点在左上角）

2. 世界坐标系：地心笛卡尔坐标（ECEF）

3. 地理坐标系：WGS84经纬度（弧度制）

4. 局部坐标系：通过eastNorthUpToFixedFrame生成的ENU坐标系

---

六、地形服务配置

// 加载ArcGIS地形服务
const arcgisTerrain = new Cesium.ArcGISTiledElevationTerrainProvider({
  url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
  token: 'your_token' // 需申请有效token
});

// 地形夸张配置
viewer.scene.globe.terrainExaggeration = 2.5; // 垂直方向放大倍数
viewer.scene.globe.terrainExaggerationRelativeHeight = 100; // 夸张基准高度

地形服务对比：

服务类型	特点	适用场景
Cesium World	全球覆盖，含水面效果	全球可视化
ArcGIS Online	高精度商业数据	区域精细分析
自定义地形	本地部署，自主控制	离线环境/专网部署

---

七、影像图层管理

// 添加高德影像图层
const gaodeProvider = new Cesium.UrlTemplateImageryProvider({
  url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
  minimumLevel: 1,  // 最小缩放级别
  maximumLevel: 18, // 最大缩放级别
  credit: '高德地图' // 版权声明
});
const layer = viewer.imageryLayers.addImageryProvider(gaodeProvider);

// 图层控制
layer.alpha = 0.8;  // 透明度（0-1）
layer.show = false; // 显隐控制
viewer.imageryLayers.raiseToTop(layer); // 置顶显示

影像服务类型：

1. WMTS服务：通过WebMapTileServiceImageryProvider加载

2. TMS服务：使用UrlTemplateImageryProvider并配置{x}{y}{z}占位符

3. 单张图片：SingleTileImageryProvider加载静态图片

---

八、调试工具与性能优化

// 显示世界坐标系轴
viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
  length: 1e7,  // 轴线长度（米）
  width: 4      // 线宽（像素）
}));

// 性能监控
viewer.scene.debugShowFramesPerSecond = true; // 显示帧率面板

优化策略：

1. 内存管理：及时调用primitive.destroy()释放资源

2. LOD控制：调整maximumScreenSpaceError平衡画质与性能

3. 缓存策略：对常用瓦片数据实施本地缓存

---