谷歌地图离线地图包，geoserver 3_使用GeoServer 和 mapbox-gl 搭建离线地图服务

视频体验

软件与数据

mapbox-gl 安装：

mapbox 地图样式规范：

谷歌地图离线地图包。GeoServer 下载：

GeoServer 插件：

需要下载的 GeoServer 矢量瓦片切片插件：

geo教教，地图数据是从OSM下载的 shape file 文件，在osm网站左侧，有几个不同的数据来源，可以选择第三个数据源，下载一个小的城市范围进行测试，在本文中，我选择了北京的数据：

在下载的文件中，可以看到，shp文件有8种，分别代表8种不同类型的地图要素：

geo怎么使用。

此外，还需要 QGIS 进行辅助，以便查看下载的 shp 文件，QGIS 下载：

准备完软件与数据环境，接下来就可以进行地图数据渲染了。

地图数据渲染

geo数据集、首先，我们可以用QGIS 查看一下下载的北京市的 shape file 文件。找到下载的数据，点击.shp文件，即可渲染出右侧的地图。利用QGIS可以大致看出我们要渲染的数据是什么样的，也可以查看数据的属性，有利于在 mapbox-gl 中对数据属性过滤。

然后，安装GeoServer 矢量瓦片插件，并启动 GeoServer，开始部署数据文件，进行数据切片。

geo datasets？新建一个工作区：

然后新建数据存储，添加刚刚下载的北京的 shp 文件：

然后将每一种要素数据进行发布：

记得在 Tile Caching 中勾选 application/vnd.mapbox-vector-tile:

新建一个图层组，将刚刚发布的图层加入图层组，这样，这些要素就能在同一个瓦片返回数据了：

最后，在 Tile Layer 中，找到刚刚新增的图层组，选择一种方式进行预览，就能看到在QGIS中差不多的效果图了。

看到这里，感觉很丑啊，和封面那张图完全没法比。接下来，我们要做的就是使用 mapbox-gl 渲染出媲美 mapbox 官方样式的地图。

使用 mapbox-gl 渲染数据

为了方便， 使用 vue-cli 快速生成一个项目，并安装 mapbox-gl:

yarn add mapbox-gl

首先需要获得 GeoServer 部署的 tile 的地址，在 GeoServer 首页中，可以看到 tms 服务，点之后，可以看到一个 xml 页面：

选择 http://localhost:8080/geoserver/gwc/service/tms/1.0.0/beijing_test%3Abeijing_shp@EPSG%3A900913@pbf 作为瓦片服务的地址，并拼接成 http://localhost:8080/geoserver/gwc/service/tms/1.0.0/beijing_test%3Abeijing_shp@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf 作为 mapbox tiles的地址；由于请求会跨域，所以需要使用nginx 转发请求。

初始化 mapbox 代码：

const 

初始化完代码之后，地图上还不会显示地图要素，需要添加一个 layer，layer的名称就是下载的 .shp 文件的名称，或者说是地图数据图层的名称，比如图层名称为 beijingtest:building，在mapbox的 "source_layer" 配置中的值就是 "building"。

接下来添加一个 building layer：

map

在页面中，可以看到，建筑数据已经被渲染出来了。对于 addLayer 参数的配置，可以查看 mapbox 样式规范。

接着，分别配置 "natural"， "landuse"等另外的图层，就能渲染出整个地图了：

最后，还缺少文字，我们使用 QGIS 查看一下数据属性，发现文字存储在points，places，roads 数据的 "name" 属性中：

比如，要渲染 roads name，可进行如下配置，注意在 layout 中指定 "text-field" 即为要渲染的文字字段名称：

map

现在看起来比较完美了，不足的是地图背景色无法进行配置。我们可以添加一个 geojson 数据源，代表着北京数据的 polygon，给这个数据进行着色，就能配置出背景色了。

map

最终效果图：

总结

要渲染出流畅、漂亮的地图，需要控制好数据需要渲染层级、对不同层级的数据进行抽稀以及读懂 mapbox 样式规范，有了这些就行作出媲美mapbox官方的离线地图了。