Web地图服务开发知识--3D 地图

其实 3D 地图没那么玄乎，本质上就是在 2D 地图的基础上多了 "高程数据"，有兴趣的同学只需要简单几步就可以实现一个简单的 3D 地图应用。
总的来说，3D 地图 = 2D 地图（卫星或者道路瓦片） + 高程数据（DEM / 高程瓦片）+ 3D 渲染（模型 / gltf）。
本文会围绕"3D UI 渲染工具"和"高程数据获取"两大块展开。

一、3D 地图的核心内容

3D 地形：每个地方的海拔起伏，配合卫星图会非常形象，是 3D 地图必备的能力。图示：

3D 建筑：建筑通常通过形状和高度来描述，但数量会比较多。OSM 维护了全球的 3D 建筑数据，由全球的相关爱好者提供，目前通过 Cesium 的 3D 瓦片服务暴露出来。严格来说建筑也可以算到 3D 物体里面，但实际情况是建筑由于数据量大且是静态的，所以通常会有单独的服务来维护建筑数据，客户端渲染的时候也会有一个单独的建筑层，按需局部加载和渲染。图示：

3D 物体：比如移动的汽车、飞机等，数据一般需要自己设计或者从其他渠道获取

二、3D 地图核心数据

1. DEM（数字高程模型）

说白了就是地形的 "数字身高表"。DEM 描述了每 30 米（或者其他精度）间隔的点的海拔数据，是 3D 地形渲染的 "核心原料"。

2. 高程瓦片

DEM 数据是完整的 "大地图"，直接加载会卡死浏览器，所以需要像切蛋糕一样切成小块 ------ 这就是高程瓦片。它和 2D 地图的图片瓦片原理一样，按缩放级别分割，加载时只拉取当前视野需要的瓦片，保证加载速度。不同工具的瓦片编码方式不同。高程瓦片比较常用的有3种：

|-------|---------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|-------------------------------------------------|
| 对比维度 | OGC 3D Tiles | Cesium Terrain（.terrain 格式） | Mapbox 高程数据（Terrain RGB） |
| 核心属性 | OGC 国际标准3D 通用容器，除了地形还支持 3D 建筑等其他数据 CesiumJS、ArcGIS Maps SDK、SuperMap iClient都支持，Three.js/OpenLayers 需插件 | Cesium 社区事实标准仅聚焦地形渲染 Cesium、baidu、天地图支持 | Mapbox 专属方案 |
| 数据格式 | 二进制 | 二进制 | 图片编码高程=R×256²+G×256+B-10000 |
| 坐标系支持 | 全主流坐标系（WGS84、Web 墨卡托、CGCS2000 等），支持自定义投影，国内 BD09/GCJ02 可适配 | 主要适配 Web 墨卡托，可通过自定义 TilingScheme 扩展至 WGS84/CGCS2000，国内坐标系需二次适配 | 仅原生支持 Web 墨卡托（EPSG:3857），其他坐标系需手动转换高程数据，国内适配成本高 |

3. glTF

3D 模型的 "通用格式"，就像图片里的 JPG 一样普及。不管是建筑模型、车辆模型还是景观模型，大多会导出成 glTF 格式，方便在 Web 端加载渲染。几乎所有主流 3D 地图工具都支持这个格式，是 3D 物体的核心载体。

三、主流 3D 地图开发工具

1. 高德地图 JS API（商用付费）

特点：
- 城市建筑 "真 3D"，开箱即用的 3D 城市地图
- 自带国内 3d building 数据
- 支持 3D 物体模型
缺点：目前没找到 3D 地形相关能力。

2. 百度地图 JS API Three（商用付费）

特点：
- 支持 3D 建筑
- 自带国内 3d building 数据
- 支持 3D 物体模型
- 提供了 CesiumTerrainTileProvider 适配器，能读取 Cesium 的高程数据（不知道是百度自己实现的还是在 sdk 中集成了Cesium）。
优势：兼容性 Cesium 数据。
缺点：没有自己的高程数据服务；UI 能力上和原生 Cesium 有差距。

3. Google Map

能力上比百度好，但国内访问受限，不多赘述。

4. 天地图（免费）

特点：
- 有自己的 3D 地图 SDK
- 有在线高程瓦片服务。
优势：目前国内少有的在线高程瓦片服务。
缺点：SDK是基于 Cesium 而来，但是目前仅支持 Cesium 1.108，导致它的 SDK 和高程数据服务和最新版本的 Cesium 都不兼容。

5. 超图（SuperMap iClient，收费）

特点：国产 GIS "全能选手"，源自 Cesium，但在国内做的确实不错
- 原生支持 3D 地形、3D 建筑、3D 模型渲染
- 自研高程瓦片服务，支持 OGC 3D Tiles、glTF 等主流格式
- 深度兼容 Cesium（SuperMap iClient for Cesium）
- 支持 OGC 3D Tiles、glTF 等主流格式
缺点：非原创；有费用。

6. OpenLayers（开源、免费）

特点：
- 能和 Cesium JS 集成实现 3D 地形
- 能和 Three.js 集成实现 3D 物体
优势：允许用户轻松从传统的平面地图视图过渡到三维地球视图，并保持数据同步。2D 开发经验可复用，适合从 2D 项目迁移到 3D 的场景。
缺点：没有 3D 建筑的能力，只能通过 3D 地形来实现，非原生支持 3D，整体能力上和原生有出入。

7. Mapbox GL JS（开源、部分免费）

特点：
- 支持显示 3D 建筑
- 通过 Three.js 渲染 3D 物体
- 自研的 Mapbox Terrain RGB 高程数据服务
- 自有 3D building 数据
优势：2D、3D 都自有 SDK 和数据。
缺点：非专注于 3D，有费用。

8. Cesium（SDK开源、数据服务收费）

特点：3D 地图领域 "王者"，数据和 SDK 都是行业顶流。SDK 是众多后来者的"源"，比如超图、天地图；OGC 3D Tiles 标准的发起者。
- 原生支持 3D 地形、3D 建筑、3D 物体
- 自有高程数据服务和 3D buinding 服务
- 是全球唯一官方 OSM 3D Tiles 托管服务。
优势：功能最全，定制化能力强。
缺点：学习成本略高，国内访问慢，使用数据服务有费用。

9. 其他工具

Unity：
- 不是传统 Web 地图工具，但国内用得很多（比如王者荣耀的地图就是 Unity 做的）。
- 开发语言是 C#，不能直接用 JS 控制，但有 API 可与 JS 通讯。付费软件。
- 适合做局部、高精度的定制 3D 地图。
HT for Web：
- 定制的 3D 工具，不适合地图类的开发，适合单个或若干 3D 物体的渲染和交互
- 但价格贵（单个 SDK 6 万）
Three.js：
- 3D 物体渲染 "基础库"
- 适合单个或若干 3D 物体的渲染和交互

四、选型建议

从能力上来说，首选 Cesium；
如果需要考虑 2D 3D 切换，考虑 Mapbox 或者 OpenLayers;
如果是局部地图或者独立的 3D 模型，考虑 Unity、HT、Three.js。

五、高程数据获取

前面聊的工具本身大多免费，但高程数据服务除了天地图，基本都要收费；而天地图又卡在版本过旧（仅兼容 Cesium 1.108）的问题上。如果想避开版本坑，或需要私有化部署高程数据，分享实测可用的方案：

1. 高程数据来源

|----------|------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------|
| 数据源 | 地址 | 核心特点 |
| SRTM 官网 | https://srtm.csi.cgiar.org/srtmdata/ | 覆盖全球高程数据，支持局部下载，精度 30 米，下载格式为 TIFF |
| bigemap | http://www.bigemap.com/reader/hcontour/ecd/ | 工具收费（约3千） |
| 地理空间数据云 | https://www.gscloud.cn/sources/index | 精度可选 30 米 / 90 米，缺点是无全球 / 全国整体数据，适合局部项目 |
| 中科图新（参考） | http://www.tuxingis.com/activity/982.html | 收费数据源 |

2. TIFF 转 Cesium 可用的 Terrain 高程瓦片

拿到 TIFF 格式的高程数据后，需要转换成 Cesium 支持的 Terrain 高程瓦片：

下载 CesiumLab（仅 Windows 版本）；
或者 SuperMap iDesktop（收费）；
导入 TIFF 数据，选择转换成 Cesium Terrain 格式的高程瓦片；
全国 30 米精度的 TIFF 数据约 4GB，转换耗时较长（实测 10 小时以上）

3. 私有化部署

转换后的 Terrain 瓦片是大量小文件，无需复杂配置：

把瓦片文件放到 Nginx 服务器指定目录；
配置 Nginx 暴露 HTTP 服务（只需开启静态文件访问）；
客户端 SDK 工具直接调用该 HTTP 地址。
希望这篇攻略能帮大家少踩坑，有其他工具使用经验的小伙伴，也欢迎在评论区交流～

最后，我会继续写一些文章来介绍这些内容：

地图合规（https://blog.csdn.net/tzy233/article/details/156914011）
地图投影（https://blog.csdn.net/tzy233/article/details/156996224）
坐标系（https://blog.csdn.net/tzy233/article/details/157034772）
地图开发工具（https://blog.csdn.net/tzy233/article/details/157185045）
离线地图（https://blog.csdn.net/tzy233/article/details/157224479）