一崎坊、線上地圖樣式
SLD:風(fēng)格化圖層描述器(Styled Layer Descriptor)的簡稱唠亚,是2005年OGC提出的一個標(biāo)準(zhǔn)樣式層描述符,這個標(biāo)準(zhǔn)在一定條件下允許WMS服務(wù)器對地圖可視化的表現(xiàn)形式進(jìn)行擴(kuò)展版述。在沒有SLD之前遥巴,只能使用一些已經(jīng)在服務(wù)器上規(guī)定好的樣式來對地圖進(jìn)行可視化。而當(dāng)使用了實現(xiàn)了SLD標(biāo)準(zhǔn)之后嫩痰,它允許我們從客戶端來對地圖進(jìn)行定義自己的樣式,分級顯示等操作窍箍,極大的擴(kuò)展了地圖可視化的靈活性串纺。SLD用于后端渲染圖層給前端返回柵格數(shù)據(jù)。
Mapbox Style:定義地圖視覺外觀的文檔椰棘,要繪制哪些數(shù)據(jù)造垛、繪制地圖的順序以及繪制數(shù)據(jù)時如何對數(shù)據(jù)進(jìn)行樣式晰搀。樣式文檔是具有特定根級和嵌套屬性的JSON對象办斑。此規(guī)范定義并描述這些屬性。Mapbox Style用于前端渲染圖層乡翅,后端只返回矢量切片數(shù)據(jù)。
Geoserver圖層樣式使用的是OGC標(biāo)準(zhǔn)的SLD文件蠕蚜,其對初學(xué)者學(xué)習(xí)成本高,學(xué)習(xí)難度大靶累,如果有類似Mapbox的mapbox studio、百度地圖的個性化地圖編輯器挣柬、高德地圖的自定義地圖編輯器將大大提高地圖制圖效率潮酒。相關(guān)文章《讓maputnik支持geoserver》急黎。
二、SLD樣式編輯軟件
1.QGIS
一個開源的GIS桌面軟件,具有豐富的地圖樣式編輯淤击,功能強(qiáng)大,能夠生成SLD文件故源。
2.udig
一個基于Java開發(fā)的GIS桌面應(yīng)用程序污抬,其樣式編輯功能沒有QGIS強(qiáng),界面操作上比QGIS簡單心软,能夠生成SLD文件壕吹,但部分樣式參數(shù)無法編輯需要自行編寫SLD,而且加載大數(shù)據(jù)量的數(shù)據(jù)軟件容易崩潰删铃。
3.SLDEditor
編輯地圖樣式的 Java 桌面應(yīng)用程序耳贬,允許使用圖形用戶界面以交互方式創(chuàng)建和編輯OGC 樣式層描述符。能生成SLD文件猎唁,可以完全控制OGC SLD標(biāo)準(zhǔn)的所有方面咒劲;但是無法加載空間數(shù)據(jù),對比著調(diào)節(jié)樣式及時查看效果诫隅;相比前兩個軟件腐魂,這個更像是一個SLD可視化編輯工具。
三逐纬、使用maputnik調(diào)節(jié)自定義樣式
通過網(wǎng)上搜索查看了《讓maputnik支持geoserver》這篇博客蛔屹,發(fā)現(xiàn)這就是我想要的工具,一個類似百度豁生、高德地圖那樣的矢量地圖配圖工具兔毒,比起前面的桌面軟件調(diào)節(jié)樣式這個更輕,功能更強(qiáng)大甸箱,操作更友好育叁。不過前提條件Geoserver需要安裝兩個插件:
- Vector Tiles (支持maobox矢量切片插件)
- MBStyle Styling(支持Mapbox樣式文件插件)
1.插件安裝
下載Geoserver對應(yīng)版本的插件Vector Tiles、MBStyle Styling芍殖,將解壓安裝包中的所有jar包放在.../webapps/geoserver/WEB-INF/lib目錄下豪嗽,重啟Geoserver,在編輯圖層中Tile Caching標(biāo)簽頁看到“application/vnd.mapbox-vector-tile”說明Vector Tiles插件安裝成功豌骏,新建樣式文件Format下拉框看到“MBStyle”說明MBStyle Styling插件安裝成功龟梦。
2.設(shè)置圖層開啟矢量切片
將OSM地圖本地發(fā)布(四)-----Geoserver發(fā)布自定義地圖中的“taiwan”圖層組開啟矢量切片功能肯适。
查看矢量切片鏈接,打開Geoserver首頁點擊TMS:
900913@pbf鏈接為maputnik要用的鏈接蹦玫,因為mapbox style只支持谷歌Web墨卡托投影EPSG:900913
http://localhost:8080/geoserver/gwc/service/tms/1.0.0/taiwan%3Ataiwan@EPSG%3A900913@pbf
3.使用maputnik打開圖層
不會使用的先看 《讓maputnik支持geoserver》這篇博客、Mapbox Style官方文檔挣输,這里提供一個json樣式模板,其中tiles中的鏈接即為前面TMS中看到的鏈接福贞,source為設(shè)置的數(shù)據(jù)源,source-layer為數(shù)據(jù)源中各個圖層的名字完丽,即taiwan圖層組中的各個圖層的名字:
{
"version": 8,
"name": "Taiwan Liberty",
"metadata": {"maputnik:renderer": "mbgljs"},
"center": [120.679882, 24.143171],
"zoom": 4,
"sources": {
"taiwan": {
"type": "vector",
"scheme": "tms",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/taiwan%3Ataiwan@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
],
"minZoom": 0,
"maxzoom": 24
}
},
"sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty",
"glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
"layers": [
{
"id": "background",
"type": "background",
"layout": {"visibility": "visible"},
"paint": {"background-color": "#F2EFE9"}
},
{
"id": "其他-海洋",
"type": "fill",
"source": "taiwan",
"source-layer": "simplified_water_polygons",
"layout": {"visibility": "visible"},
"paint": {"fill-color": "#AAD3DF"}
},
{
"id": "其他-建筑物",
"type": "fill",
"source": "taiwan",
"source-layer": "building",
"minzoom": 0,
"maxzoom": 24,
"paint": {
"fill-color": "#DCD9D6",
"fill-outline-color": {
"base": 1,
"stops": [[13, "hsla(35, 6%, 79%, 0.32)"], [14, "hsl(35, 6%, 79%)"]]
}
}
},
{
"id": "水域",
"type": "fill",
"source": "taiwan",
"source-layer": "water",
"minzoom": 0,
"maxzoom": 24,
"layout": {"visibility": "visible"},
"paint": {"fill-color": "#B2CEFE"}
},
{
"id": "水域-邊界",
"type": "line",
"source": "taiwan",
"source-layer": "water_outline",
"minzoom": 0,
"maxzoom": 24,
"paint": {"line-color": "#B2CEFE"}
},
{
"id": "水域-河流",
"type": "line",
"source": "taiwan",
"source-layer": "river",
"minzoom": 0,
"maxzoom": 24,
"layout": {"visibility": "visible"},
"paint": {"line-color": "#B2CEFE", "line-width": 1}
},
{
"id": "公路-line",
"type": "line",
"source": "taiwan",
"source-layer": "route_line",
"minzoom": 0,
"maxzoom": 24,
"layout": {"line-join": "round", "line-cap": "round"},
"paint": {"line-color": "#4A83BF", "line-opacity": 0.6, "line-width": 0.4}
},
{
"id": "地名-city",
"type": "symbol",
"source": "taiwan",
"source-layer": "placenames_medium",
"minzoom": 0,
"maxzoom": 24,
"layout": {
"text-field": {"type": "identity", "property": "name"},
"text-size": 12,
"text-allow-overlap": false,
"text-ignore-placement": false,
"text-font": ["SimSun Regular"]
},
"paint": {
"text-halo-color": "#FFFFFF",
"text-opacity": 1,
"text-halo-width": 1
}
}
],
"id": "taiwan_liberty"
}
4.使用maputnik調(diào)節(jié)樣式
這里提供一個完整的樣式文件逻族,鏈接: https://pan.baidu.com/s/1qbVC5Jbsa42rbP-p_i5XxQ 提取碼: w2pf聘鳞,文件中的taiwan.json為樣式文件要拂。
打開maputnik將taiwan.json文件導(dǎo)入,即可進(jìn)行樣式調(diào)節(jié)搏嗡。
四彻况、Mapbox樣式轉(zhuǎn)為SLD
1.導(dǎo)出maputnik調(diào)節(jié)好的樣式文件
2.分離不同圖層樣式
maputnik導(dǎo)出的json文件包含了所有的圖層樣式舅踪,將不同圖層樣式單獨分離出來抽碌,方便導(dǎo)入Geoserver中,以building圖層為例货徙,在layers數(shù)組中找到"source-layer": "building"的樣式皮胡,放入下面模板中:
{
"version": 8,
"name": "Taiwan Liberty",
"metadata": {"maputnik:renderer": "mbgljs"},
"center": [120.679882, 24.143171],
"zoom": 4,
"sources": {
"taiwan": {
"type": "vector",
"scheme": "tms",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/taiwan%3Ataiwan@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
],
"minZoom": 0,
"maxzoom": 24
}
},
"sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty",
"glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
"layers": [
//分離的圖層樣式粘貼放在這里!
],
"id": "taiwan_liberty"
}
最終分離樣式文件如下:
{
"version": 8,
"name": "Taiwan Liberty",
"metadata": {"maputnik:renderer": "mbgljs"},
"center": [120.679882, 24.143171],
"zoom": 4,
"sources": {
"taiwan": {
"type": "vector",
"scheme": "tms",
"tiles": [
"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/taiwan%3Ataiwan@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf"
],
"minZoom": 0,
"maxzoom": 24
}
},
"sprite": "https://maputnik.github.io/osm-liberty/sprites/osm-liberty",
"glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key={key}",
"layers": [
{
"id": "其他-建筑物",
"type": "fill",
"source": "taiwan",
"source-layer": "building",
"minzoom": 15,
"maxzoom": 24,
"filter": ["all", ["!=", "building", "ferry"]],
"paint": {
"fill-color": "#DCD9D6",
"fill-outline-color": {
"base": 1,
"stops": [[13, "hsla(35, 6%, 79%, 0.32)"], [14, "hsl(35, 6%, 79%)"]]
}
}
},
{
"id": "水域-建筑物",
"type": "fill",
"source": "taiwan",
"source-layer": "building",
"minzoom": 13,
"maxzoom": 24,
"filter": ["all", ["==", "building", "ferry"]],
"paint": {
"fill-color": "#DCD9D6",
"fill-outline-color": {
"base": 1,
"stops": [[13, "hsla(35, 6%, 79%, 0.32)"], [14, "hsl(35, 6%, 79%)"]]
}
}
}
],
"id": "taiwan_liberty"
}
3.將Mapbox樣式導(dǎo)入Geoserver
新建樣式:
選擇MBStyle锌杀,粘貼上一節(jié)分離的building樣式文件泻仙,Validate檢測一下正確性后保存:
4.查看轉(zhuǎn)換后的SLD文件
上一步新建MB_building樣式保存完成后,在.../webapps/geoserver/data/workspaces/
taiwan/styles中可以找到SLD文件:
提示:如果沒有看到對應(yīng)的sld文件突想,可能是新建樣式選錯了工作空間或使用了默認(rèn)工作空間究抓,在其他文件夾里找;或者需要打開樣式文件預(yù)覽一下才會生成sld文件刺下。
五怠李、總結(jié)
目前來看Mapbox提供的技術(shù)是最好用的開源自定義樣式編輯解決方案,maputnik是基于Mapbox規(guī)范實現(xiàn)的開源的輕量級樣式編輯工具捺癞,Mapbox官方樣式編輯工具是Mapbox Studio。
安裝MBStyle Styling插件已經(jīng)支持了Mapbox樣式文件惕鼓,為什么要多此一舉轉(zhuǎn)為SLD文件?從轉(zhuǎn)入過程可以發(fā)現(xiàn)Geoserver支持的樣式格式只有SLD文件箱歧,使用插件也是轉(zhuǎn)為SLD文件在使用一膨,這樣轉(zhuǎn)換后可以將SLD文件導(dǎo)出在其他環(huán)境中使用,比如生產(chǎn)環(huán)境豹绪,其他Geoserver服務(wù)器中;另一方面我一直在尋找SLD轉(zhuǎn)Mapbox Style工具方便已經(jīng)存在的SLD樣式能供Mapbox使用蝉衣、Mapbox Style轉(zhuǎn)SLD工具方便已經(jīng)存在的MB樣式供Geoserver使用巷蚪,這樣能更高效使用,如調(diào)節(jié)一套樣式多平臺上使用屁柏。