Cesium 从入门到精通 · 系列说明与总体规划
这是一个 Cesium 实战教程系列。每期在上一期的工程基础上加一个可运行的功能。
一、面向读者
- 有 Vue3 + TypeScript 基础，想进入三维 GIS / 数字孪生方向；
- 接触过 Cesium Demo，但不清楚如何组织成工程化项目；
- 被 Viewer / Scene / Camera / Entity / DataSource 等概念绕晕，需要一条清晰的学习路径。
前置要求：了解 Vue3 组合式 API、会使用 npm、知道经纬度的基本含义。后端部分（GeoServer / PostGIS / Spring Boot）从安装开始讲，不需要预先掌握。
二、技术栈
前端
Vue 3 + Vite + TypeScript ├── Cesium（跟随 npm latest） ├── Element Plus ├── Pinia └── ECharts（大屏联动部分）后端（第 15 期起引入）
GeoServer（WMS / WMTS / WFS 发布） ├── PostGIS（空间数据库） └── Spring Boot（空间查询接口）三、内容规划
系列分五个阶段，共约 23 期。
阶段一 · 入门基础
| 期数 | 主题 |
|---|---|
| 01 | 环境搭建：Vue3 + Vite + TS + Cesium，显示第一个地球 |
| 02 | 核心对象与相机控制：Viewer / Scene / Camera / Ellipsoid |
| 03 | 多源底图接入：天地图、ArcGIS、OSM、高德 |
| 04 | 图元绘制：Entity 点 / 线 / 面 / 标注 / Billboard |
| 05 | 坐标系与鼠标拾取：经纬度 ↔ Cartesian3 互转 |
| 06 | 相机飞行与视角锁定：flyTo / lookAt / 跟随 |
阶段二 · 进阶交互与三维
| 期数 | 主题 |
|---|---|
| 07 | 鼠标测量：距离、面积、高度 |
| 08 | GeoJSON 加载与数据可视化：边界、热力图、点聚合 |
| 09 | 3D Tiles：倾斜摄影与 BIM 模型加载 |
| 10 | 地形加载与空间剖切 |
| 11 | 动态材质：扫描、流纹、闪烁、扩散圈 |
阶段三 · 工程化与 UI
| 期数 | 主题 |
|---|---|
| 12 | Element Plus 工具栏 / 侧边栏 / 图层面板 |
| 13 | Pinia 状态管理：图层开关与相机状态 |
| 14 | 性能优化：requestRenderMode、资源销毁 |
阶段四 · 后端服务
| 期数 | 主题 |
|---|---|
| 15 | GeoServer 部署与服务发布 |
| 16 | PostGIS 安装与空间数据表设计 |
| 17 | GeoServer ↔ PostGIS 联动 |
| 18 | Spring Boot 集成 PostGIS，提供空间查询接口 |
| 19 | 前后端联调：点击查询、缓冲区分析 |
阶段五 · 实战与部署
| 期数 | 主题 |
|---|---|
| 20 | 轨迹回放 |
| 21 | WebSocket 实时数据上屏 |
| 22 | Cesium + ECharts 大屏联动 |
| 23 | Vite 打包与 Nginx 部署 |
实际写作过程中可能会根据需要调整期数和顺序。
四、工程组织
所有期数在同一个工程里演进，第 N 期 = 第 N-1 期 + 新功能。最终交付的是一个完整项目，不是一堆孤立的 Demo。
五、环境要求
开始第 1 期之前需要：
- Node.js ≥ 18（推荐 22 LTS）
- VS Code（安装 Volar 插件）
- Chrome 或 Edge 浏览器
GeoServer、PostGIS、JDK 等到第 15 期再安装。
下一期进入第 1 期：工程初始化与第一个 3D 地球。````
