如何讓向量瓦片配圖神器maputnik支援 geoserver

GIS兵器庫發表於2020-10-14

Server

關鍵詞：maputnik、geoserver、向量地圖、向量瓦片、mapbox、mapboxgl、地圖配圖、地圖配色

一直想搞一個類似百度、高德地圖那樣的向量地圖配圖工具

百度個性化地圖配圖工具：

高德自定義地圖配圖工具：

在網上找過幾次，都沒有找到。

無意中從這個部落格瞭解到了Maputnik，一陣擺弄後，感覺相見恨晚。對！就是我要找的東西。

Maputnik是啥？有啥用？

Maputnik是Mapbox樣式規範的開源視覺化編輯器，它和Mapbox的mapbox studio、百度地圖的個性化地圖編輯器、高德地圖的自定義地圖編輯器乾的是一個事，都是用來編輯向量瓦片地圖樣式，配圖用的。

有了Maputnik就可以這樣來發布地圖，

用geoserver釋出向量瓦片
用Maputnik為上面的向量瓦片配置地圖樣式
用mapbox呼叫向量瓦片，並應用上面的地圖樣式，在前臺渲染地圖展示

和 mapbox studio 相比，Maputnik開源，可以免費在本地使用，不再需要把自己的地圖資料上傳到mapbox的伺服器，相應的也就不用受制於mapbox免費賬號對每月上傳資料量的限制，和對地圖呼叫次數的限制。

maputnik 官網：https://maputnik.github.io/

Maputnik github地址：https://github.com/maputnik/editor

Maputnik 官方線上體驗地址：https://maputnik.github.io/editor/

Maputnik的建立背景，作者是想打造一套對標 mapbox 的開源GIS解決方案。

遇到的問題

用Maputnik1.7.0版本載入geoserver釋出的向量瓦片時遇到一個問題，載入的圖層不顯示，這個問題困擾了自己好幾天，去網上百度、谷歌，相關的資料也非常少，沒有答案。

自己好不容易遇到的兵器，難道就要這樣擦肩而過嗎？不，我不允許！

功夫不負有心人，經過幾天的折騰，終於讓我發現了其中的問題，下面詳細說一下。

排查問題

發現地圖沒顯示，就習慣性的開啟了瀏覽器的開發者工具，發現縮放、拖動地圖時，瀏覽器去請求了瓦片，但都沒有成功。

拷貝其中一個請求地址，在瀏覽器單獨開啟，看到geoserver返回的報錯提示是，請求的瓦片超出了資料範圍。

Maputnik地圖的api使用的是mapboxgl，那直接用mapboxgl呼叫一下發布的向量瓦片，或許能更容易排查問題。網上介紹mapboxgl呼叫geoserver向量瓦片的文章還是挺多的，自己參考著寫了個示例。執行示例，結果瓦片可以正確請求到並顯示。

程式碼：

var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	zoom: 3,
	center: [108.34942054748535,37.83543237333567]
});

map.on('load', function() {
	map.addLayer({
		"id": "mapillary",
		"type": "line",
		"source": {
			"type": "vector",
			'scheme':'tms',
			"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
		},
		"source-layer": "city_region",
		"paint": {
			"line-opacity": 0.6,
			"line-color": "rgb(53, 175, 109)",
			"line-width": 2
		}
	}, 'waterway-label');
});

效果：

這就有點意思了，看來還是Maputnik的呼叫配置出現了問題。開啟瀏覽器開發者工具，發現示例請求的瓦片地址中的編號，要比maputnik中的編號大很多。

在maputnik中拖動地圖。找到和示例中相同的瓦片編號，發現地圖跑到了南半球。

這會是什麼原因造成的呢，會不會是請求瓦片的大小不同，比如一個是256x256的，一個是512x512的，通常這種情況也會導致出現上面的問題，而且編號會剛好相差一半。

但現在的編號差的好像並不是一半，那geoserver釋出的向量瓦片到底是多少呢？Maputnik中又是按照什麼規則來請求的呢？抱著這個疑問，我決定去研究一下mapboxgl的api，看會不會有什麼發現。

上面示例的程式碼中，資料來源是通過source來配置的

"source": {
	"type": "vector",
	'scheme':'tms',
	"tiles": ["http://192.168.50.198:7000/geoserver/gwc/service/tms/1.0.0/china%3Acity_region@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"],
},

這裡面有三個引數，type和tiles的意思好理解，scheme是什麼意思呢？

檢視mapboxgl的api，關於scheme的解釋如下：

這個 xyz和tms分別是啥意思呢？

百度後覺得這篇部落格寫的還算明白，它們是兩種請求瓦片的協議，不同協議對瓦片編號的規則也不同，在xyz協議中，Y從頂部開始計算，而在tms協議中，Y從底部開始計算。mapboxgl預設使用xyz協議，而geoserver釋出的是tms協議。所以呼叫時需要定義scheme為tms。

問題找到這裡，感覺自己已經看到黎明的曙光了。

那如果把示例中的scheme設定為xyz會不會出現和Maputnik一樣的錯誤呢？嘗試後答案是肯定的，地圖同樣跑到了南半球。