如何讓矢量瓦片配圖神器maputnik支持 geoserver

151次閱讀

沒有評論

共計 3029 個字符，預計需要花費 8 分鐘才能閱讀完成。

如何讓矢量瓦片配圖神器 maputnik 支持 geoserver，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

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

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

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

無意中從這個博客了解到了 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 中拖動地圖。找到和示例中相同的瓦片編號，發現地圖跑到了南半球。

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

但現在的編號差的好像并不是一半，那 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 一樣的錯誤呢？嘗試后答案是肯定的，地圖同樣跑到了南半球。