一、CesiumJS 介绍以及基础使用

CesiumJS 是一个开源的 Web 三维地球与地图引擎，由 Cesium 官方团队（CesiumGS）开发，基于 JavaScript 和 WebGL，可在浏览器内无需安装插件地渲染大规模、高精度的 3D 地形、影像、矢量数据乃至倾斜摄影模型。

核心能力

功能类别	典型场景
全球地形	支持 Cesium World Terrain、自定义地形服务（如 Mapbox Terrain-RGB）。
影像与矢量	加载 WMS、WMTS、ArcGIS REST、Bing、OpenStreetMap、矢量瓦片（MVT）等。
3D Tiles	官方规范，用于流式传输和可视化倾斜摄影、BIM、点云、海量 3D 模型。
时间动态	内置 Timeline & Clock，可播放卫星轨迹、气象、仿真数据。
分析工具	量测（距离/面积/体积）、剖面、通视分析、阴影分析、裁剪平面。
多源融合	支持 glTF/GLB、KML、CZML、GeoJSON、3D Tiles、OBJ→3D Tiles 转换。

技术特点

• 跨平台：Chrome、Edge、Firefox、Safari、移动端浏览器（WebGL 2.0）。
• 高性能：视锥剔除、LOD、GPU 实例化、Web Worker 并行解码。
• 易集成：npm 包 cesium，支持 ES Module、Webpack/Vite、TypeScript。
• 扩展生态：

• • Cesium ion：官方 SaaS，提供全球地形、影像、3D 建筑、托管 3D Tiles。
  • 社区插件：heatmap.js、Echarts-GL、Cesium-Navigation、Cesium-Measure。

快速上手

1. 安装

pnpm install cesium

vite 配置如下：

pnpm add vite-plugin-cesium -D

import cesium from 'vite-plugin-cesium'
....
export default defineConfig({
  plugins:[
    cesium()
  ],
  ....
})

1. 基础 HTML

<link rel="stylesheet" href="node_modules/cesium/Build/Cesium/Widgets/widgets.css">
<div id="cesiumContainer" style="height:100vh;"></div>
<script type="module">
  import * as Cesium from 'cesium';
  Cesium.Ion.defaultAccessToken = '<YOUR_ION_TOKEN>';
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrain: Cesium.Terrain.fromWorldTerrain()
  });
  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(116.39, 39.90, 100),
    model: { uri: 'path/to/model.glb' }
  });
</script>

1. 本地开发

npm run dev

浏览器访问 http://localhost:5173（Vite 默认端口）。

典型应用

• 智慧城市：北京城市副中心、深圳数字孪生。
• 航空航天：卫星在轨监测、火箭发射仿真。
• 应急演练：地震、洪水灾害三维推演。
• 元宇宙：虚拟校园、数字景区。

学习资源

• 官方文档：https://cesium.com/learn/cesiumjs/
• 中文社区：https://bbs.cesiumlab.com/
• 示例仓库：https://github.com/CesiumGS/cesium/tree/main/Apps/Sandcastle/gallery

一句话总结：CesiumJS 是目前最成熟的 Web 端数字地球解决方案，适合需要 “无需安装、跨平台、高精度 3D 场景” 的所有行业。

二、CesiumJS功能封装

CesiumManager 是一个基于 Cesium 的三维地球管理类，封装了常用的地图功能和组件。我封装的这个库包含以下功能

核心功能

1. 初始化与配置

• 构造函数: 创建 Cesium Viewer 实例并初始化基本配置
• 容器管理: 管理三维地球的容器元素
• Token 配置: 设置 Cesium Ion 的访问令牌
• 场景配置: 支持动画、图层选择器、全屏按钮等多种 UI 组件配置

2. 地图服务集成

• 天地图服务: 支持天地图影像和注记图层
• 高德地图服务: 支持高德地图影像和注记图层
• 腾讯地图服务: 支持腾讯地图影像、矢量和注记图层
• ArcGIS 服务: 支持 ArcGIS 影像服务

3. 相机控制

• 相机飞行: cameraFlyTo 方法支持相机飞行动画
• 视角设置: cameraSetView 方法设置相机视角
• 边界飞行: flyToBoundingSphere 飞行到指定边界范围
• 相机聚焦: cameraLookAt 和 cancelCameraLookAt 实现相机聚焦功能
• 环绕旋转: rotateAroundAPoint 实现相机绕点旋转

4. 坐标转换

• 坐标系转换: coordinateTransform 静态方法支持多种坐标系间转换(BD09/GCJ02/WGS84)

5. 视觉效果

• 天空盒: changeSkyBox 动态更换天空盒纹理
• 天气系统: changeWeather 和 showOrHideWeather 控制天气效果
• 光照控制: 支持方向光、默认光照和禁用光照
• 抗锯齿: 多级抗锯齿设置（低/中/高/超高）
• 阴影效果: 支持场景阴影和地形阴影

6. 交互控制

• 鼠标事件: 封装 LEFT_CLICK 等屏幕空间事件
• 自定义鼠标控制: 支持启用/禁用自定义鼠标控制器
• 指南针控件: 集成指南针导航控件

7. 性能优化

• 渲染优化: 支持分辨率缩放、MSAA采样等优化选项
• 地形优化: 设置地形细节误差和瓦片缓存
• 模型优化: 启用对数深度缓冲和高动态范围渲染

内置组件管理

组件	功能
poi	兴趣点管理
popup	弹窗组件
path	路径绘制
model	3D模型管理
wall	墙体绘制
polygon	多边形绘制
tileset	3D瓦片集管理
animation	动画控制
video	视频面板
particle	粒子系统
weather	天气系统

事件系统

• 拾取事件: cesium:pick - 鼠标点击拾取对象
• 时钟事件: cesium:clock - 时钟更新事件
• 相机事件: cesium:camera:changed - 相机变化事件
• 渲染事件: cesium:preRender - 渲染前事件

资源管理

• 清理机制: allClear 方法统一清理所有资源
• 组件销毁: 按依赖顺序销毁各个子组件

这个封装提供了完整的 Cesium 功能抽象，便于在项目中快速集成和使用三维地球功能。