系列文章目錄
開源方案搭建可離線的精美矢量切片地圖服務-1.開篇（附成果演示地址）
開源方案搭建可離線的精美矢量切片地圖服務-2.PostGIS+GeoServer矢量切片
開源方案搭建可離線的精美矢量切片地圖服務-3.Mapbox個性化地圖定製入門
開源方案搭建可離線的精美矢量切片地圖服務-4.Mapbox樣式設計
開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現
開源方案搭建可離線的精美矢量切片地圖服務-6.Mapbox之.pbf字體庫
開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用
開源方案搭建可離線的精美矢量切片地圖服務-8.mapbox 之sprite大圖圖標文件生成（附源碼）
項目成果展示（所有項目文件都在阿里雲的共享雲虛擬主機上，訪問地圖可以會有點慢，請多多包涵）。
01：中國地圖：http://test.sharegis.cn/mapbox/html/3china.html
02：德國-德累斯頓市：http://test.sharegis.cn/mapbox/html/6germany.html
1.Mapbox設計思想
下面我們以一條路的設計爲基礎進行分析。本身這只是線的矢量數據，我們要對它進行豐富的渲染，大體上分爲四個部分：
1.橙色的爲是路的主體。對應type=line，是對線的渲染。代碼如下
{ //高速公里 "id": "bridge-motorway", "type": "line", "source": "germany", "source-layer": "gis_osm_roads_07_1", "filter": [ "==", "fclass", "motorway" ], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-width": { "base": 1.5, "stops": [ [ 5, 0.75 ], [ 18, 32 ] ] }, "line-color": "hsl(26, 100%, 68%)" }, "interactive": true },
2.爲了美觀路兩邊加白色渲染線：對應type=line，是線渲染
{ "id": "bridge-motorway-case", "type": "line", "source": "germany", "source-layer": "gis_osm_roads_07_1", "filter": [ "==", "fclass", "motorway" ], "layout": { "line-join": "round" }, "paint": { "line-width": { "base": 1.5, "stops": [ [ 10, 1 ], [ 16, 2 ] ] }, "line-color": "hsl(0, 0%, 100%)", "line-gap-width": { "base": 1.5, "stops": [ [ 5, 0.75 ], [ 18, 32 ] ] } }, "interactive": true },
3.公路編號圖標，圖標是一張圖片外加屬性數據。對應type=symbol，是符號渲染
{ "id": "road-shields-white", "type": "symbol", "source": "germany", "source-layer": "gis_osm_roads_07_1", "minzoom": 14, "filter": [ "==", "fclass", "motorway" ], "layout": { "text-size": 9, "icon-image": "de-motorway-2", "icon-rotation-alignment": "viewport", "text-max-angle": 38, "symbol-spacing": { "base": 1, "stops": [ [ 11, 150 ], [ 14, 200 ] ] }, "text-font": [ "Microsoft YaHei", ], "symbol-placement": { "base": 1, "stops": [ [ 10, "point" ], [ 11, "line" ] ] }, "text-padding": 2, "text-rotation-alignment": "viewport", "text-field": "{ref}", "text-letter-spacing": 0.05, "icon-padding": 2 },
4.單行道路標，對應type=symbol，是符號渲染
{ "id": "road-oneway-arrows-white", "type": "symbol", "source": "germany", "source-layer": "gis_osm_roads_07_1", "minzoom": 16, "filter": [ "==", "fclass", "motorway" ], "layout": { "symbol-placement": "line", "icon-image": { "base": 1, "stops": [ [ 16, "oneway-white-small" ], [ 17, "oneway-white-large" ] ] }, "icon-padding": 2, "symbol-spacing": 200 }, "paint": {}, "interactive": true }
從上面的分析可以看出mapbox的對單個圖層渲染可以寫各種樣式，可以對每個細節做不同的渲染，對線就可以做多次渲染，符號也可以多次，極大提高了渲染的靈活性。可將每個渲染細節劃分出來，某些共用的渲染方式還可以複用。告別了傳統一圖層一渲染的模式，這就是個性化定製地圖的基礎，其他渲染內容請查看Api；
2.Mapbox樣式在線編輯
這裏我們講一下Mapbox官方提供的在線樣式編輯器的使用。
首先註冊一個Mapbox賬戶；登陸後轉到樣式編輯器，創建一個自己的樣式，這裏建議從官方的樣式庫中選取一個模板。我這裏選擇了一個基礎模板，
進入編輯頁面後，就可以看到他的基礎樣式地圖了，點擊你感興趣的渲染區域，便會彈出點擊範圍內的所有渲染樣式對象。
我們打開路的渲染，修改路圖層中的小路的顏色爲紅色，結果如下
編輯器類似於Photoshop的編輯面板，還有一些例如圖層選擇等功能，自己多摸索一下，這裏就不展開了，下面講一下樣式文件的導出：
返回主頁面，點擊剛纔編輯的樣式項目，選擇導出功能，便可以將我們修改好的樣式文件導出，也可以導出一些mapbox的常用模板，對自己感興趣的官方樣式代碼實現做分析，完善自己的樣式實現。
3.Mapbox樣式中幾個特別關注的四個方法
1.縮放顯示
對於某個圖層我們只想他在8-12級的地圖級別進行顯示，這是提供了minzoom，maxzoom的屬性來設定縮放級別，它支持小數，例如minzoom:8.55;
2.屬性過濾
我們有時候圖層展示的時候要進行屬性的過濾，例如一個圖層pio點圖層有飯店、學校、咖啡廳等點數據我們進行定製個性化展示，這時圖層數據進行過濾來對不同類別進行單獨的渲染。我們可以使用Filter 進行過濾，filter提供了好多種過濾條件具體可查看api。
3.分級
前面1中是控制不同級別圖層的顯示與否，這邊的分級是指不同級別範圍圖層渲染方式，例如8-10級是路是細路，10-15級路變成粗的路，隨着級別變化作調整，使得整地圖縮放起來更加自然。對應的api爲stops，下面會給出例子。
4.屬性輸出
我們對一些要展示標註內容的屬性要進行輸出，我們使用{}進行輸出，例如要輸出name屬性的內容可以{name}便可以輸出。
最後給出一個有這四個特性的一個樣式例子。
{ //村莊 "id": "place-village", "type": "symbol", "source": "germany", "source-layer": "gis_osm_places_07_1", //8級開始顯現 "minzoom": 8, //超過15級隱藏 "maxzoom": 17, //過濾出所有fclass=village的點 "filter": [ "==", "fclass", "village" ], "layout": { //使用{}輸出屬性數據 "text-field": "{name}", "text-font": [ "Microsoft YaHei", ], "text-max-width": 7, "text-size": { "base": 1, //字體默認大小爲1，10-16級字體爲大小爲 11.5 //大於16級字體大小爲18 "stops": [ [ 10, 11.5 ], [ 16, 18 ] ] } }, "paint": { "text-halo-color": "hsl(0, 0%, 100%)", "text-halo-width": 1.25, "text-color": "hsl(0, 0%, 0%)" }, "interactive": true },
4.總結
這一篇主要講了一下Mapbox的樣式的設計原理，以及Mapbox在線樣式編輯器的使用，最後分享了一下我在使用Mapbox中認爲比較重要的方法，下篇主要講一下我的離線部署項目的具體實現。
待續。。。。。。。。。。。。。。。。。。。。。
作者：ATtuing
出處：http://www.cnblogs.com/ATtuing
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。