企业官网建设流程全解析

其实 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 TilesCesium Terrain.terrain 格式Mapbox 高程数据Terrain RGB核心属性OGC 国际标准3D 通用容器除了地形还支持 3D 建筑等其他数据CesiumJS、ArcGIS Maps SDK、SuperMap iClient都支持Three.js/OpenLayers 需插件Cesium 社区事实标准仅聚焦地形渲染Cesium、baidu、天地图支持Mapbox 专属方案数据格式二进制二进制图片编码高程R×256²G×256B-10000坐标系支持全主流坐标系WGS84、Web 墨卡托、CGCS2000 等支持自定义投影国内 BD09/GCJ02 可适配主要适配 Web 墨卡托可通过自定义 TilingScheme 扩展至 WGS84/CGCS2000国内坐标系需二次适配仅原生支持 Web 墨卡托EPSG:3857其他坐标系需手动转换高程数据国内适配成本高3. glTF3D 模型的 “通用格式”就像图片里的 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 等主流格式深度兼容 CesiumSuperMap 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. CesiumSDK开源、数据服务收费特点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.js3D 物体渲染 “基础库”适合单个或若干 3D 物体的渲染和交互四、选型建议从能力上来说首选 Cesium如果需要考虑 2D 3D 切换考虑 Mapbox 或者 OpenLayers;如果是局部地图或者独立的 3D 模型考虑 Unity、HT、Three.js。五、高程数据获取前面聊的工具本身大多免费但高程数据服务除了天地图基本都要收费而天地图又卡在版本过旧仅兼容 Cesium 1.108的问题上。如果想避开版本坑或需要私有化部署高程数据分享实测可用的方案1. 高程数据来源数据源地址核心特点SRTM 官网https://srtm.csi.cgiar.org/srtmdata/覆盖全球高程数据支持局部下载精度 30 米下载格式为 TIFFbigemaphttp://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/157224479WMTS和瓦片https://blog.csdn.net/tzy233/article/details/159862368