開源方案搭建可離線的精美矢量切片地圖服務-4.Mapbox樣式設計

時間  2019-11-21
標籤 開源 方案 搭建 離線 精美 矢量 切片 地圖 服務 4.mapbox mapbox 樣式 設計 简体版
原文   原文鏈接

 

系列文章目錄

開源方案搭建可離線的精美矢量切片地圖服務-1.開篇（附成果演示地址）html

開源方案搭建可離線的精美矢量切片地圖服務-2.PostGIS+GeoServer矢量切片 c#

開源方案搭建可離線的精美矢量切片地圖服務-3.Mapbox個性化地圖定製入門api

開源方案搭建可離線的精美矢量切片地圖服務-4.Mapbox樣式設計編輯器

開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現字體

開源方案搭建可離線的精美矢量切片地圖服務-6.Mapbox之.pbf字體庫ui

開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用阿里雲

開源方案搭建可離線的精美矢量切片地圖服務-8.mapbox 之sprite大圖圖標文件生成（附源碼）spa

項目成果展現（全部項目文件都在阿里雲的共享雲虛擬主機上，訪問地圖能夠會有點慢，請多多包涵）。

01：中國地圖：http://test.sharegis.cn/mapbox/html/3china.html

02：德國-德累斯頓市：http://test.sharegis.cn/mapbox/html/6germany.html設計

1.Mapbox設計思想

下面咱們以一條路的設計爲基礎進行分析。自己這只是線的矢量數據，咱們要對它進行豐富的渲染，大致上分爲四個部分：code

image

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帳戶；登錄後轉到樣式編輯器，建立一個本身的樣式，這裏建議從官方的樣式庫中選取一個模板。我這裏選擇了一個基礎模板，

image

image

進入編輯頁面後，就能夠看到他的基礎樣式地圖了，點擊你感興趣的渲染區域，便會彈出點擊範圍內的全部渲染樣式對象。

image

咱們打開路的渲染，修改路圖層中的小路的顏色爲紅色，結果以下

image

編輯器相似於Photoshop的編輯面板，還有一些例如圖層選擇等功能，本身多摸索一下，這裏就不展開了，下面講一下樣式文件的導出：

     返回主頁面，點擊剛纔編輯的樣式項目，選擇導出功能，即可以將咱們修改好的樣式文件導出，也能夠導出一些mapbox的經常使用模板，對本身感興趣的官方樣式代碼實現作分析，完善本身的樣式實現。

image

 

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

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程