1、 安装前期要求：
安装要求：Linux + JDK8.0以上版本，具体步骤略。
2、 安装步骤：
1） 安装GeoServer
get https://sourceforge.net/projects/geoserver/files/GeoServer/2.17.5/geoserver-2.17.5-war.zip/download
GeoServer有两个版本：War版本、二进制执行版本。其中War版本可以通过安装Tomcat后将War包放在WEB_INFO目录下即可。建议下载二进制版本。
2）安装GeoServer矢量瓦片切片插件
get https://sourceforge.net/projects/geoserver/files/GeoServer/2.17.5/extensions/geoserver-2.17.5-vectortiles-plugin.zip/download
下载后将文件解压后将其中的jar包放在geoserver-2.17.5/webapps/geoserver/WEB-INF/lib目录下。
3） 启动GeoServer服务
geoserver-2.15.1/bin/start.sh &
4） 下载mapbox-gl
mapbox-gl版本建议使用MacOS系统下载安装，也可以通过Ubuntu系统下载安装。
3 发布地图服务：
1） 准备shp文件
地图渲染效果如上（在QGIS上打开文件）
准备的 shp 文件包含8个Shp文件。如上图所示。
2） 部署数据文件，进行数据切片
a) 新建一个工作区
选择新建工作区，如上图所示，输入工作区名称和工作区命名空间URI，选择默认工作区，点击提交按钮。
b) 新建数据存储
c) 每个要素发布
记得在 Tile Caching 中勾选 application/vnd.mapbox-vector-tile
d) 新建图层组
e) 可以通过Layer Preview看到发布效果
4、 使用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 map = new mapboxgl.Map({
container: "app",
center: [116.391229827904, 39.907092084593216], // starting position [lng, lat]
zoom: 16, // starting zoom
style: {
version: 8,
glyphs: "/cdn/map/fonts/{fontstack}/{range}.pbf",
sources: {
beijingSource: {
type: "vector",
scheme: "tms",
tiles: [
"http://localhost/geoserver/gwc/service/tms/1.0.0/beijing_test%3Abeijing_shp@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf", // 使用 nginx 转发
],
},
},
layers: [],
},
});
初始化完代码之后，地图上还不会显示地图要素，需要添加一个 layer，layer的名称就是下载的 .shp 文件的名称，或者说是地图数据图层的名称，比如图层名称为 beijingtest:building，在mapbox的 "source_layer" 配置中的值就是 "building"。
接下来添加一个 building layer：
map.on("load", function () {
map.addLayer({
id: "railways",
source: "beijingSource",
"source-layer": "railways",
type: "line",
// minzoom: 12,
paint: {
"line-color": "#f2934a",
"line-opacity": 1,
"line-width": 3,
},
});
}
在页面中，可以看到，建筑数据已经被渲染出来了。对于 addLayer 参数的配置，可以查看 mapbox 样式规范。
接着，分别配置 "natural"， "landuse"等另外的图层，就能渲染出整个地图了：
最后，还缺少文字，我们使用 QGIS 查看一下数据属性，发现文字存储在points，places，roads 数据的 "name" 属性中：
points属性查看
比如，要渲染 roads name，可进行如下配置，注意在 layout 中指定 "text-field" 即为要渲染的文字字段名称：
map.addLayer({
id: "roads-name",
source: "beijingSource",
"source-layer": "roads",
type: "symbol",
layout: {
"text-field": "{name}",
"text-transform": "uppercase",
"text-font": ["Microsoft YaHei Regular"],
"text-padding": 5,
"text-keep-upright": false,
"text-rotation-alignment": "map",
"symbol-placement": "line-center",
"text-pitch-alignment": "viewport",
"text-size": 12,
},
paint: {
"text-halo-color": "rgb(200, 200, 200)",
"text-halo-width": 1,
"text-color": "rgb(0, 0, 0)",
"text-halo-blur": 0.5,
},
interactive: true,
});
现在看起来比较完美了，不足的是地图背景色无法进行配置。我们可以添加一个 geojson 数据源，代表着北京数据的 polygon，给这个数据进行着色，就能配置出背景色了。
map.addSource("bg", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [
[
[115.13671875, 39.2492708462234],
[117.57568359374999, 39.2492708462234],
[117.57568359374999, 41.08763212467916],
[115.13671875, 41.08763212467916],
[115.13671875, 39.2492708462234],
],
],
},
},
],
},
});
//------------------ bg
map.addLayer({
id: "bg",
source: "bg",
type: "fill",
paint: {
"fill-color": "#efe9e1",
},
});
最终效果图：
总结
要渲染出流畅、漂亮的地图，需要控制好数据需要渲染层级、对不同层级的数据进行抽稀以及读懂 mapbox 样式规范，有了这些就行作出媲美mapbox官方的离线地图了。