4.2 三维 Web GIS 与可视化

4.2 三维 Web GIS 与可视化

本节摘要：三维地图让城市、地形、模型可视化更直观。本节讲 Cesium、Three.js 等三维 Web GIS 技术——浏览器里做三维地球。

你能学到什么

阅读完本节，你应当能够：

1. 选三维 Web GIS 技术
2. 用 Cesium 做三维地球
3. 加载三维数据（3D Tiles、模型）

概念脉络

一、为什么需要三维

二维看平面，三维看立体——城市建筑、地形起伏、地下管线、倾斜摄影模型，三维更直观。数字孪生、智慧城市、BIM+GIS 都要三维。

二、主流三维技术

图 4-2 三维 Web GIS 渲染

三、Cesium 基础

Cesium.Ion.defaultAccessToken = '你的token';
const viewer = new Cesium.Viewer('cesiumContainer');
// 加载 3D Tiles 倾斜摄影
viewer.scene.primitives.add(
  new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(assetId) })
);
​

Cesium 是三维 GIS 首选，支持全球地形、影像、3D Tiles、时间动态数据。

四、3D Tiles

3D Tiles 是 OGC 海量三维数据流式传输标准：

• 把大三维场景切成瓦片树
• LOD（层级细节）：远处粗、近处细
• 按视野流式加载，加载需要的瓦片
• 支持倾斜摄影、BIM、点云、模型

3D Tiles 解决浏览器加载超大三维模型的问题。

五、三维数据格式

• glTF/glb：3D 模型标准（3D 的 JPEG）
• 3D Tiles：海量三维瓦片
• 点云：LAS/LAZ、PNTS（3D Tiles 点云）
• BIM：IFC 转 3D Tiles

六、三维性能优化

• LOD：按距离加载不同细节层级
• 剔除：不渲染视野外和被遮挡的
• 实例化：大量重复模型用实例化渲染
• 瓦片流式：3D Tiles 按需加载
• WebGL 优化：减少 draw call、合并几何

⚠️ 常见坑：浏览器直接加载超大三维模型——卡顿甚至崩溃。用 3D Tiles 切片流式加载，按视野和 LOD 加载需要的部分。

💡 关键直觉：三维 GIS 用 Cesium（地球+3D Tiles），自定义三维用 Three.js。3D Tiles 是海量三维数据流式标准，靠 LOD/剔除/实例化优化性能。

七、Cesium 的核心概念

Cesium 和二维框架一样有自己的心智模型，先理解四个概念：

1. Viewer：三维场景容器，管理相机、图层、控件。
2. Camera：相机决定你看哪里、多近，setView 和 flyTo 是常用操作。
3. Entity 与 Primitive：Entity 面向业务（一个建筑、一个标签，属性直观）；Primitive 面向渲染性能（大量几何一次绘制）。
4. DataSource：数据源，加载 GeoJSON、KML、CZML 等格式。

// 相机定位到北京
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 20000)
});
// 加一个标注实体
viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(116.4, 39.9),
  label: { text: '北京', pixelOffset: new Cesium.Cartesian2(0, -20) }
});
​

八、点云与地形加载

除了 3D Tiles，三维场景还常加载两类数据：

// 加载地形
viewer.terrainProvider = await Cesium.createWorldTerrainAsync();
// 加载点云（3D Tiles 的 pnts 格式）
const pointCloud = await Cesium.Cesium3DTileset.fromUrl('/data/pointcloud/tileset.json');
viewer.scene.primitives.add(pointCloud);
​

点云数据量极大（一次扫描可能上亿点），发布前要按 3D Tiles 标准切分，浏览器端通过 LOD 分级加载，否则再强的显卡也扛不住。

九、三维性能调优清单

遇到三维场景卡顿，按顺序排查：

1. 数据量：单个模型顶点数是否过大，切 3D Tiles 是否到位。
2. LOD 距离：近处用高模、远处用低模，LOD 阈值调合理。
3. 实例化：大量重复的树、路灯用实例化（Instancing）渲染。
4. 剔除：确保相机背面和遮挡剔除打开，减少无效绘制。
5. 分辨率：屏幕分辨率越高开销越大，必要时限制 devicePixelRatio。
6. 纹理：纹理贴图压缩，避免超大 PNG。

十、选择 Cesium 还是 Three.js

一句话：要做"带地理坐标的三维系统"，选 Cesium；要做"游戏感、自定义渲染"的 3D 展示，选 Three.js；两者也可以结合，用 Cesium 打底、Three.js 做精细物件渲染。

十一、三维场景的常见业务需求

三维 Web GIS 不是用来炫技的，先看看业务到底要什么：

• 空间定位：在三维里找到某个楼、某条管线的位置，配合二维地图互联动。
• 方案展示：规划项目把建筑方案放进真实地形里，让评审直观看到影响。
• 监测联动：传感器数据在三维模型上着色或闪烁，如水位、温度超阈值告警。
• 模拟推演：洪水淹没范围、视线遮挡、信号覆盖在三维里算出来看效果。

明确需求后，很多"三维项目"其实只需要轻量方案（如 Mapbox 的三维拉伸、deck.gl 的三维聚合），不必一上来就 Cesium 加 3D Tiles。先小步验证，再逐步加深，是三维项目的稳妥节奏。

十二、三维数据生产链路

三维数据从采集到可用的链路：

1. 无人机倾斜摄影或激光扫描采集原始数据。
2. 空三解算、点云配准、纹理重建，输出 OSGB 或 obj 格式。
3. 转 3D Tiles 标准，按 LOD 分级切片。
4. 上传到服务器，Cesium 端按视野流式加载。

# 点云转 3D Tiles 的常见工具链示意
# （工具众多，核心是：原始点云 -> 分块 -> 金字塔 -> tileset.json）
​

这条链路上，数据生产的成本远高于前端开发。项目立项时要把数据采集、处理、更新周期算进预算，否则"三维平台"会变成"三维空壳"。

本章回顾

• 三维需求：城市/地形/管线/倾斜摄影/数字孪生，三维更直观。
• 主流技术：Cesium（三维地球/GIS）、Three.js（通用 3D）、Mapbox 3D、deck.gl。
• Cesium：三维 GIS 首选，支持地形/影像/3D Tiles/时间动态。
• 3D Tiles：OGC 海量三维流式标准，LOD 按距离加载细节。
• 格式：glTF/glb（模型）、3D Tiles（瓦片）、点云、BIM。
• 优化：LOD、剔除、实例化、瓦片流式、减少 draw call。

下一节讲客户端分析和交互。