离线地图 · 技术文档

### 地图相关知识简介在描述具体方案之前，先简单介绍一下地图相关知识。 #### 瓦片地图为了达到更快的地图加载效率，地图资源大多以瓦片形式加载，即在不同的缩放等级下，在服务端获取相对应的瓦片资源，关于[瓦片原理的介绍](https://zhuanlan.zhihu.com/p/21344894) #### 坐标系现在常用的坐标系一般分为以下三种，这三个坐标系之间也是可以[相互转换](https://github.com/wandergis/coordtransform)的 * WGS84（mapbox、谷歌）：即地球坐标系，国际上通用坐标系 * GCJ-02（高德、腾讯）：即火星坐标系，WGS84坐标系经加密后的坐标系。 * BD-09（百度）：即百度坐标系，GCJ-02坐标系经加密后的坐标系。 ### 地图瓦片服务本地部署 #### 简介使用 [FoxGIS Server Lite](https://github.com/jingsam/foxgis-server-lite/) 来搭建矢量瓦片地图服务此项目基于 nodejs、Express搭建，是一款简单易用的矢量瓦片地图服务软件其中处理瓦片数据使用了 mapbox 官方维护的 `@mapbox/mbtile` 库（通过 nodejs 和 tilelive.js 集成来处理 [MBTiles](https://github.com/mapbox/mbtiles-spec) 格式的数据），[更多关于 @mapbox/mbtile 介绍](https://github.com/mapbox/node-mbtiles) #### 如何使用？可以查看 [FoxGIS Server Lite 文档](https://jingsam.github.io/foxgis-server-lite/#/README) #### MBTiles 格式数据获取可以通过以下两种方式获取： 1、可以直接在 [download.geofabrik.de](https://download.geofabrik.de/) 获取开源且免费的 OSM（OpenStreetMap ）数据 2、还可以在 [openmaptiles.org](https://openmaptiles.org/) 获取免费或者收费的 OSM 数据 ##### 两者区别相同点： * 数据源都为 OSM（OpenStreetMap）数据不同点： * 前者不提供地图的样式，后者提供完整的地图样式 * 前者提供不同层级的细粒度的瓦片数据（未进行图层合并或者数据优化），后者提供完整的世界地图瓦片数据（数据已经整合且优化） * 前者数据更新及时，后者提供免费的数据为三年前瓦片数据（收费的数据则较新）除了两者上的一些异同之外，结合目前情况，还有以下影响因素： 1、地图瓦片数据的合并及处理需要了解 GIS 的相关知识，学习成本比较大。 2、地图样式处理需要有较好的设计资源，因为地图本身的特性，如放大或缩小不同等级呈现出不同的内容或样式，所以说设计一个好的地图，不仅从宏观层面还是从微观层面都需要设计师的参与，维护成本太高。最后选择采用第二种方式提供的地图数据及地图样式。 #### 瓦片服务搭建过程（本地开发环境） > 以下过程以 macOS 为例 1、准备阶段 * 下载 [FoxGIS Server Lite](https://jingsam.github.io/foxgis-server-lite/foxgis-server-lite-macos.tar.gz) 客户端 * 在[openmaptiles](openmaptiles.org)下载 [地图瓦片数据](https://openmaptiles.os.zhdk.cloud.switch.ch/v3.6.1/planet/vec2BifuH2N7N8EtXX4YOwASWZCD2eF3/2017-07-03_planet_z0_z14.mbtiles) （地图版本为 2017-07-03\_planet\_z0\_z14） * 在 [maptiler-basic-gl-style](https://github.com/openmaptiles/maptiler-basic-gl-style) 中将此项目中的 `style.json` 文件下载到本地 2、将下载好的压缩包解压到指定目录下，并进入 `foxgis-server-lite-macos` 文件夹下 ~~~bash cd foxgis-server-lite-macos 复制代码 ~~~ 3、将之前下载好的地图放到 `foxgis-server-lite-macos/data/tilesets` 文件夹内， 4、将下载好的 `style.json`文件中相关内容进行替换如下 ~~~bash # 替换瓦片数据请求地址 # 将 "url": "https://api.maptiler.com/tiles/v3/tiles.json?key={key}" # 替换为 "url": "http://localhost:1234/api/tilesets/2017-07-03_planet_z0_z14/tilejson" # 替换字体文件并添加 sprite 图 # 将 "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}", # 替换为 "sprite": "http://localhost:1234/api/sprites/streets/sprite", "glyphs": "http://localhost:1234/api/fonts/{fontstack}/{range}.pbf", 复制代码 ~~~ 5、修改 `style.json` 文件中的字体名称 ~~~bash # 将所有 "text-font" 项的值替换为 ["Open Sans Regular"], 如： "text-font": ["Noto Sans Regular"], # 替换为 "text-font": ["Open Sans Regular"], 复制代码 ~~~ 6、将修改好的 `style.json` 文件添加到 `foxgis-server-lite-macos/data/styles` 文件夹内 7、直接运行或命令行启动`foxgis-server-lite-macos`文件夹下 `foxgis-server-lite-macos` 文件即可 ~~~bash # 启动瓦片服务 ./foxgis-server-lite-macos 复制代码 ~~~ 8、紧接着会提示服务启动成功 ~~~bash # 默认服务端口号是1234 Listening on port 1234 # 如果需要更改端口号可以通过设置环境变量改变 export PORT=8080 && ./foxgis-server-lite-macos 复制代码 ~~~ > 注：如果更改了服务端口号，也需要同步修改 style.json 中请求地址的端口号完成以上步骤，就已经成功的运行起地图瓦片服务了，接下来结合 mapbox 就可以在页面上渲染出地图了。 ### mapbox 简介支持移动端、桌面端以及网页，灵活、快速的地理信息可视化工具。 #### 如何使用？ mapbox 提供了比较丰富的文档内容，我们应用的是 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/) 推荐可以从 [Example](https://docs.mapbox.com/mapbox-gl-js/example/) 开始看 #### 简单示例 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body,#map{ width: 100%; height: 100%; } </style> <link rel="stylesheet" href="http://localhost:1234/api/assets/mapbox-gl.css" /> <script src="http://localhost:1234/api/assets/mapbox-gl.js"></script> </head> <body> <div id="map"></div> </body> <script> var map = new mapboxgl.Map({ container: "map", // container id style: "http://localhost:1234/api/styles/style", // style URL center: [116.40, 39.9066], // starting position [lng, lat] zoom: 13 // starting zoom }); </script> </html> 复制代码 ~~~ ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b221667c96ba4a2ba0ef7837c3e374fd~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)