關(guān)鍵詞：maputnik薇组、geoserver外臂、矢量地圖坐儿、矢量瓦片、mapbox、mapboxgl貌矿、地圖配圖炭菌、地圖配色
一直想搞一個(gè)類似百度、高德地圖那樣的矢量地圖配圖工具
百度個(gè)性化地圖配圖工具：
高德自定義地圖配圖工具：
在網(wǎng)上找過幾次逛漫，都沒有找到黑低。
無意中從這個(gè)博客了解到了Maputnik，一陣擺弄后酌毡，感覺相見恨晚克握。對(duì)！就是我要找的東西枷踏。
Maputnik是啥菩暗？有啥用？
Maputnik是Mapbox樣式規(guī)范的開源可視化編輯器旭蠕，它和Mapbox的mapbox studio停团、百度地圖的個(gè)性化地圖編輯器、高德地圖的自定義地圖編輯器干的是一個(gè)事掏熬，都是用來編輯矢量瓦片地圖樣式佑稠，配圖用的。
有了Maputnik就可以這樣來發(fā)布地圖旗芬，
- 用geoserver發(fā)布矢量瓦片
- 用Maputnik為上面的矢量瓦片配置地圖樣式
- 用mapbox調(diào)用矢量瓦片舌胶，并應(yīng)用上面的地圖樣式，在前臺(tái)渲染地圖展示
和 mapbox studio 相比岗屏，Maputnik開源辆琅，可以免費(fèi)在本地使用，不再需要把自己的地圖數(shù)據(jù)上傳到mapbox的服務(wù)器这刷，相應(yīng)的也就不用受制于mapbox免費(fèi)賬號(hào)對(duì)每月上傳數(shù)據(jù)量的限制婉烟，和對(duì)地圖調(diào)用次數(shù)的限制。
maputnik 官網(wǎng)：https://maputnik.github.io/
Maputnik github地址：https://github.com/maputnik/editor
Maputnik 官方在線體驗(yàn)地址：https://maputnik.github.io/editor/
Maputnik的創(chuàng)建背景暇屋，作者是想打造一套對(duì)標(biāo) mapbox 的開源GIS解決方案似袁。
遇到的問題
用Maputnik1.7.0版本加載geoserver發(fā)布的矢量瓦片時(shí)遇到一個(gè)問題，加載的圖層不顯示咐刨，這個(gè)問題困擾了自己好幾天昙衅，去網(wǎng)上百度、谷歌定鸟，相關(guān)的資料也非常少而涉，沒有答案。
自己好不容易遇到的兵器联予，難道就要這樣擦肩而過嗎啼县？不材原，我不允許！
功夫不負(fù)有心人季眷，經(jīng)過幾天的折騰余蟹，終于讓我發(fā)現(xiàn)了其中的問題，下面詳細(xì)說一下子刮。
排查問題
發(fā)現(xiàn)地圖沒顯示威酒，就習(xí)慣性的打開了瀏覽器的開發(fā)者工具，發(fā)現(xiàn)縮放挺峡、拖動(dòng)地圖時(shí)葵孤，瀏覽器去請(qǐng)求了瓦片，但都沒有成功橱赠。
拷貝其中一個(gè)請(qǐng)求地址佛呻，在瀏覽器單獨(dú)打開，看到geoserver返回的報(bào)錯(cuò)提示是病线，請(qǐng)求的瓦片超出了數(shù)據(jù)范圍吓著。
Maputnik地圖的api使用的是mapboxgl，那直接用mapboxgl調(diào)用一下發(fā)布的矢量瓦片送挑，或許能更容易排查問題绑莺。網(wǎng)上介紹mapboxgl調(diào)用geoserver矢量瓦片的文章還是挺多的，自己參考著寫了個(gè)示例惕耕。運(yùn)行示例纺裁，結(jié)果瓦片可以正確請(qǐng)求到并顯示。
代碼：
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');
});
效果：
這就有點(diǎn)意思了司澎，看來還是Maputnik的調(diào)用配置出現(xiàn)了問題欺缘。打開瀏覽器開發(fā)者工具，發(fā)現(xiàn)示例請(qǐng)求的瓦片地址中的編號(hào)挤安，要比maputnik中的編號(hào)大很多谚殊。
在maputnik中拖動(dòng)地圖。找到和示例中相同的瓦片編號(hào)蛤铜，發(fā)現(xiàn)地圖跑到了南半球嫩絮。
這會(huì)是什么原因造成的呢，會(huì)不會(huì)是請(qǐng)求瓦片的大小不同围肥，比如一個(gè)是256x256的剿干，一個(gè)是512x512的，通常這種情況也會(huì)導(dǎo)致出現(xiàn)上面的問題穆刻，而且編號(hào)會(huì)剛好相差一半置尔。
但現(xiàn)在的編號(hào)差的好像并不是一半，那geoserver發(fā)布的矢量瓦片到底是多少呢氢伟？Maputnik中又是按照什么規(guī)則來請(qǐng)求的呢榜轿？抱著這個(gè)疑問篮愉，我決定去研究一下mapboxgl的api，看會(huì)不會(huì)有什么發(fā)現(xiàn)差导。
上面示例的代碼中，數(shù)據(jù)源是通過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"],
},
這里面有三個(gè)參數(shù)猪勇，type和tiles的意思好理解设褐，scheme是什么意思呢？
查看mapboxgl的api泣刹，關(guān)于scheme的解釋如下：
這個(gè) xyz和tms分別是啥意思呢助析？
百度后覺得這篇博客寫的還算明白，它們是兩種請(qǐng)求瓦片的協(xié)議椅您，不同協(xié)議對(duì)瓦片編號(hào)的規(guī)則也不同外冀，在xyz協(xié)議中，Y從頂部開始計(jì)算掀泳，而在tms協(xié)議中雪隧，Y從底部開始計(jì)算。mapboxgl默認(rèn)使用xyz協(xié)議员舵，而geoserver發(fā)布的是tms協(xié)議脑沿。所以調(diào)用時(shí)需要定義scheme為tms。
問題找到這里马僻，感覺自己已經(jīng)看到黎明的曙光了庄拇。
那如果把示例中的scheme設(shè)置為xyz會(huì)不會(huì)出現(xiàn)和Maputnik一樣的錯(cuò)誤呢？嘗試后答案是肯定的韭邓，地圖同樣跑到了南半球措近。
真相大白了，Maputnik界面上因?yàn)闆]有配置scheme的選項(xiàng)女淑，而scheme默認(rèn)是xyz協(xié)議瞭郑，所以就導(dǎo)致它只支持xyz協(xié)議，不支持tms協(xié)議鸭你，所以就請(qǐng)求不到瓦片凰浮，地圖無法正確顯示。
如何解決
問題找到了苇本，接下來就是如何解決袜茧，思路有二：
- geoserver發(fā)布一個(gè)
xyz協(xié)議的矢量瓦片服務(wù)占卧。 - 修改一下Maputnik的源碼财破，增加
scheme的選項(xiàng)，讓它支持tms協(xié)議建车。
思路一自己找了一圈俺夕，沒有發(fā)現(xiàn)相關(guān)教程裳凸，個(gè)人感覺思路二更簡(jiǎn)單一些贱鄙，只要在下圖的紅框的位置加個(gè)選擇scheme的下拉框就能解決問題
下載maputnik的源碼，一通研究姨谷，發(fā)現(xiàn)修改下面兩個(gè)位置就可以：
1逗宁、在這里加一個(gè)下拉框控件
2、在這里給scheme設(shè)置一下默認(rèn)值
ok梦湘，來瞎颗，走兩步
一步
兩步
哈哈，效果杠杠的捌议！問題完美解決哼拔。
總結(jié)
Maputnik是一個(gè)矢量瓦片配圖工具，可以替代 mapbox studio瓣颅，免費(fèi)使用倦逐。
Maputnik默認(rèn)只支持xyz協(xié)議的矢量瓦片，不支持geoserver發(fā)布的tms協(xié)議矢量瓦片宫补。
Maputnik的地圖api使用的是mapboxgl檬姥，mapboxgl通過設(shè)置source的scheme選項(xiàng)，可以支持tms協(xié)議粉怕。
通過修改Maputnik源碼穿铆，增加scheme選項(xiàng)，就可以讓Maputnik支持geoserver發(fā)布的tms協(xié)議矢量瓦片斋荞。
源碼
原文地址：http://gisarmory.xyz/blog/index.html?blog=maputnikGeoserverVectorTiles
本文章采用 知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際許可協(xié)議 進(jìn)行許可荞雏。歡迎轉(zhuǎn)載、使用平酿、重新發(fā)布凤优，但務(wù)必保留文章署名《GIS兵器庫(kù)》（包含鏈接： http://gisarmory.xyz/blog/），不得用于商業(yè)目的蜈彼，基于本文修改后的作品務(wù)必以相同的許可發(fā)布筑辨。
