3D离线地图的两种实现方式

引言

我们一般都是在线地图，比如百度、高德、腾讯地图用的多，在线地图API也非常方便调用，并且可以利用在线地图强大的地图服务，比如路径规划等功能，但是有些特殊的项目需要在内网环境下展示地图，而且是3D地图。这就要求我们能够在离线情况下，实现对3D地图的展示。

基石

实现离线地图的基础，是地图瓦片的获取，我们需要先有离线的地图瓦片或者地图的合成文件（.tif）。所以依据输入的不同，我们有不同的实现。如果是离线的地图瓦片，我们可以直接利用，至于为啥，我们后面会有说明。如果是离线的地图合成文件（.tif），我们需要利用地图引擎（ArcGIS、SuperMap、GeoServer等）发布为地图服务（比如OGC的WMTS），然后在内网使用地图服务即可。

实现

方式一：

利用离线的地图瓦片，地图瓦片的获取，有多种方式，可以使用现成的地图下载器，也可以编写爬虫来下载。不论采用哪种方式，下载下来都是按照指定的目录结构和文件命名方式来的。比如zoom级别为1，横坐标网格为1，则文件路径为 1/1，即文件夹1里面有文件夹1，再里面就是不同的纵坐标的图片，比如1/1/0.png、1/1/-1.png、1/1/1.png、1/1/2.png，配上我下载好的目录，可以看一下：

为什么都要按照指定的目录结构和文件命名方式呢？因为在线地图瓦片地址，都是含有x、y、z值参数的，比如：

• 百度：https://maponline1.bdimg.com/starpic/?qt=satepc&u=x=1630;y=431;z=13;v=009;type=sate&fm=46&app=webearth2&v=009&udt=20210318
• 高德：https://webst03.is.autonavi.com/appmaptile?style=6&x=428&y=209&z=9
• 腾讯：https://p3.map.gtimg.com/sateTiles/14/853/602/13656_9639.jpg?version=239
• 更多：参考维基百科

所以针对不同的地图，要采用对应的目录结构进行存放瓦片。

有了离线瓦片，我们便可以直接利用静态瓦片服务来访问，什么是静态瓦片服务？就是把刚才的离线瓦片，放到一个tomcat中或者nginx指向即可，搭建一个静态文件服务，通过内网可以访问即可。注意tomcat要处理一下跨域问题。

有了离线瓦片静态服务器，便可以利用各种前端地图库，比如OpenLayers(tileLayer XYZ Souce)、Leaflet(tileLayer)等实现二维地图展示、Cesium(UrlTemplateImageryProvider)、deck.gl(TileLayer)等实现三维地图展示。这里以deck.gl为例：

const tileLayer = new TileLayer({
   
   
  // data: "http://10.1.100.47:8080/tms/{z}/{x}/{-y}.jpg",
  // data: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
  data: "http://10.0.30.152:8180/mapabc/satellite/{z}/{x}/{y}.jpg",
  minZoom: