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官方的離線地圖了。
https://blog.csdn.net/semian7633/article/details/108072482