使用 OpenStreetMap 数据搭建离线地图服务

QuickStart

环境准备

• Git
• Node.js
• yarn

准备好环境帮在 Shell 中运行以下命令，快速启动一个离线地图服务

git clone https://gitee.com/jingsam/foxgis-server-lite.git map-server
cd map-server
yarn install
npm start

下载代码库（>400M)后，安装依赖库并启动服务

运行结果

打开浏览器输入地址 http://localhost:1234/api/styles/world/html

世界地图

此时可以对地图进行缩放、移动操作，因为演示项目地图数据很少，只有国家和地区的边界。

地图服务组成

离线地图服务由3部分内容组成：

• 地图数据，基础数据来自 OpenStreetMap，使用 Mapbox 工具包装为 .mbtiles 文件
• 地图服务，使用 github 开源项目 foxgis-server-lite
• 地图前端，使用 Mapbox 开源前端库 mapbox-gl-js

因为地图数据使用的是 OpenStreetMap 数据源，因此只有矢量数据，这意味着它可以切换不同的地图主题颜色，但不能显示卫星地图。

使用中国地图数据

到下载页面，http://download.geofabrik.de/asia.html ，选择中国区地图进行下载

中国区地图

生成 .mbtiles 地图数据文件

使用 tailmaker https://github.com/systemed/tilemaker 工具将 .osm.pbf 转换成 .mbtiles 文件

通过 Docker 工具来运行 tailmaker （需要提前给Docker分配较大内存）

mv /path/to/china-latest.osm.pbf /tmp
docker run -v /tmp:/app osmtw/tilemaker \
    --output /app/out.mbtiles \
    --input /app/china-latest.osm.pbf \
    --config resources/config-openmaptiles.json \
    --process resources/process-openmaptiles.lua
    --combine

地图样式

使用 Mapbox 在线工具 Mapbox Studio 设计地图样式

Mapbox 工具集

https://github.com/mapbox/awesome-vector-tiles