目标：为二维/三维地理空间数据可视化提供高性能、可维护、易扩展的技术方案
核心原则：
- 三维场景 → CesiumJS + 自建瓦片服务
- 二维场景 → Mapbox GL JS + Deck.gl
一、整体架构对比
| 维度 | 三维方案：CesiumJS + 自建瓦片 | 二维方案：Mapbox + Deck.gl |
|---|---|---|
| 核心库 | CesiumJS（WebGL 地球引擎） | Mapbox GL JS（矢量瓦片渲染） + Deck.gl（高性能图层叠加） |
| 坐标系 | WGS84 地理坐标系（经纬度 + 椭球高），支持 ECEF | Web Mercator（EPSG:3857），平面投影 |
| 渲染方式 | 全球三维球体，支持地形、3D模型、动态光照 | 平面地图，支持矢量瓦片、热力图、路径动画等 |
| 典型应用 | 数字孪生城市、飞行模拟、地质灾害监测、卫星轨道 | 数据大屏、轨迹分析、POI 聚合、实时监控 |
二、性能对比
| 指标 | CesiumJS | Mapbox + Deck.gl |
|---|---|---|
| 渲染性能 | ⭐⭐⭐ • 支持百万级 3D 点/模型（需优化） • 内存占用较高（尤其加载地形/影像） | ⭐⭐⭐⭐ • Deck.gl 基于 WebGL，支持千万级点/线高效渲染 • GPU 加速，帧率稳定（60fps+） |
| 加载速度 | 取决于瓦片服务： • 自建 3D Tiles / Terrain 服务需优化缓存 • 首屏加载较慢（需预加载策略） | 极快： • Mapbox 瓦片 CDN 加速 • Deck.gl 图层按需加载 |
| 移动端支持 | 有限： • 高端手机可运行简单场景 • 复杂场景易卡顿/发热 | 良好： • 主流手机流畅运行 • 支持触摸缩放/拖拽 |
| 大数据量处理 | 需分块（3D Tiles）、LOD、剔除优化 | 内置聚合（如 HexagonLayer、GridLayer），天然适合大数据 |
✅ 结论：
- 二维大数据 → Deck.gl 性能优势明显
- 三维沉浸式 → Cesium 不可替代，但需性能调优
三、技术栈与开发体验
| 方面 | CesiumJS | Mapbox + Deck.gl |
|---|---|---|
| 语言/框架 | 原生 JS / TypeScript，无框架依赖 | 同样原生友好，完美集成 React/Vue（有 react-map-gl、@deck.gl/react） |
| 学习曲线 | 较陡： • 需理解地理坐标、椭球高、3D Tiles 规范 • 调试复杂（如深度冲突、光照） | 较平缓： • Deck.gl 层级清晰（Layer → Data → Style） • 文档丰富，社区活跃 |
| 调试工具 | Cesium Inspector（内置调试面板） | Chrome DevTools + Deck.gl Devtools（React 专用） |
| TypeScript 支持 | 官方提供完整类型定义 | 官方强 TypeScript 支持 |
| 与现有系统集成 | 可嵌入任意 DOM，但需注意 z-index / resize 事件 | 同样灵活，常作为组件嵌入 SPA |
四、数据与瓦片支持
| 类型 | CesiumJS | Mapbox + Deck.gl |
|---|---|---|
| 底图 | • 支持 WMTS、TMS、XYZ 影像 • 推荐自建 OGC 3D Tiles / Cesium ion | • 原生支持 Mapbox Vector Tiles (MVT) • 可接入 XYZ/WMTS 栅格图 |
| 高程数据 | 必须提供 Terrain（如 Quantized Mesh） | 不支持真实高程，仅平面高度（extruded） |
| 矢量数据 | 支持 GeoJSON/KML，但性能弱于 Deck.gl | GeoJSON / MVT 原生高效支持 |
| 3D 模型 | ✅ glTF / 3D Tiles（B3DM/i3dm） | ❌ 仅支持 extrusion（拉伸建筑），无真 3D 模型 |
| 自建瓦片 | 需部署： • 3D Tiles（用 Cesium ion 或开源工具如 3d-tiles-tools） • Terrain（用 cesium-terrain-builder） | 推荐： • 使用 tippecanoe 生成 MVT • 用 Nginx / MinIO 提供瓦片服务 |
🔧 自建建议：
- 三维：用 Cesium ion（商业） 或 开源 pipeline（PostGIS + 3D Tiles generator）
- 二维：用 PostGIS + ST_AsMVT + Nginx 实现动态矢量瓦片
五、部署与成本
| 项目 | CesiumJS | Mapbox + Deck.gl |
|---|---|---|
| 授权 | MIT 开源（免费） ⚠️ Cesium ion 云服务收费 | Mapbox GL JS v2+ 不再开源（需 token，免费额度有限） ✅ 可替换为 MapLibre GL（开源 fork） |
| 自建成本 | 高： • 3D Tiles 存储大（GB~TB级） • 需 GPU 服务器优化切片 | 低： • MVT 体积小 • 普通服务器即可 |
| CDN 加速 | 建议对瓦片做 CDN 缓存 | Mapbox 默认全球 CDN；自建 MVT 也易 CDN 化 |
💡 推荐组合（完全开源）：
- 二维：MapLibre GL + Deck.gl
- 三维：CesiumJS + 自建 3D Tiles（开源工具链）
六、扩展性与生态
| 能力 | CesiumJS | Mapbox + Deck.gl |
|---|---|---|
| 插件生态 | 有限，主要靠官方模块 | 丰富： • Deck.gl 有 50+ 内置图层（Path, Scatterplot, Trips...） • 社区贡献活跃 |
| 与 GIS 工具集成 | 支持 QGIS/CityEngine 导出 3D Tiles | 支持 QGIS 导出 MVT / GeoJSON |
| AR/VR 支持 | ✅ 支持 WebXR（实验性） | ❌ 无 |
| 动画/时间轴 | 内置 Clock & Timeline，适合时空数据 | 需自行实现（但 Deck.gl 支持帧动画） |
七、选型决策树（快速判断）
八、总结建议
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 数字孪生、智慧城市三维可视化 | ✅ CesiumJS + 自建瓦片 | 唯一成熟的开源 Web 三维地球引擎 |
| 实时轨迹、热力图、区域聚合（二维） | ✅ MapLibre GL + Deck.gl | 性能强、开发快、完全开源 |
| 混合场景（2.5D 建筑拉伸） | ⚠️ 可尝试 Cesium（支持 extruded polygons） 或 Deck.gl 的 PolygonLayer + elevation | 根据交互复杂度权衡 |
| 移动端优先 | ❌ 避免复杂 Cesium ✅ 优先 Deck.gl | 移动端 GPU 资源有限 |
