Mapbox淺析（快速入門Mapbox）

1.是什麼？

    Mapbox是一個能夠免費建立並定製個性化地圖的網站。

2.瞭解一些基本東西

   常見的 mapbox.js和mapbox-gl.js的異同點？

    相同點：

                1.都是由Mapbox公司推出的免費開源的JavaScript庫

                2.均可以做爲前端渲染矢量瓦片交互地圖的工具

                3.它們的樣式設置都支持Mapbox Style

 

    不一樣點：

                1.mapbox.js是Leaflet的一個插件，使用方式是經過結合Leaflet使用

                2.mapbox-gl.js是Leaflet的一個插件，使用方式是經過結合Leaflet使用

                3.使用mapbox-gl.js的瀏覽器必須支持WebGL渲染，在舊的瀏覽器中是不支持mapbox-gl.js的，而mapbox.js則沒有 此限制

3.能表達整個Map的style文件

    mapbox-gl.js目前是圍繞style文件來進行的，其內容以下：

1.  
   {
2.  
       "version": 8,
3.  
       "name": "Mapbox Streets",
4.  
       "sprite": "mapbox://sprites/mapbox/streets-v8",
5.  
       "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
6.  
       "sources": {...},
7.  
       "layers": [...]
8.  
   }

從以上能夠看出，除了一些基本的屬性定義以外，就是sources和layers。

基本屬性的能夠參見官網https://www.mapbox.com/mapbox-gl-js/api

mapbox經過這樣一個style的配置文件來描述整個地圖，這是目前其餘map都沒有使用的方式。在討論如何設計實現這個目的以前， 咱們想一下這樣作有什麼好處？最大的好處莫過於爲自定義地圖提供了方便之門。使用者壓根能夠不寫任何代碼，用mapbox就能作出一個本身想要的地圖。這一點很符合mapbox目前提供的服務。style如此之重要，以致於官網專門對style進行詳細了說明， 涉及到各個參數及做用。

3.Map的組成：

    任何GIS引擎必然要處理兩個部分，一個是數據來源，一個是這些數據在界面呈現的樣子，在style裏面的source和layer對應於這兩個部分。

4.Source：

    目前source支持vector，raster， geojson， image，video。geojson的支持比較巧妙，有了這個就能夠處理各類矢量類型，包括集合。而vector主要解決的是矢量瓦片，raster解決的是目前經常使用的柵格化的瓦片。video的加入使得功能更加的現代化。 mapbox在style裏面，爲source定義了一個type屬性，來講明這些類型。

 

    除了這個屬性以外，source其實都有一個id，被layer引用，從而讓數據源和數據呈現關聯在一塊兒。 這個地方須要注意的是，source和layer之間的關係，能夠是1->n

5.Layer：

            雖然也是分爲幾類的，但並非直接根據source來分類的。目前分爲：background,fill, line, symbol, raster, circle。除了background類型的layer不須要綁定source以外。其餘的都須要有source。fill類型的layer只負責填充；line類型的layer只負責線條；symbol類型的layer會處理sprite，文字等；raster類型的layer就只負責圖片， circle類型的layer是更高一層的業務處理須要。

           無論是什麼界面，都是由點線面組成的。 layer其實表明的就是界面，只是你們一般會認爲一個layer上會放置各類點，線，面。 mapbox把這種layer再細分層了更小的單元， 只包含點的layer，只負責呈現線的layer，只負責面的layer。若是把多個layer組合在一塊兒，就和如今的通用想法的layer是同樣的，source和layer的1->n關係在這個地方發揮做用了。

            這樣設計不只簡單化，關鍵還能夠提升效率，能批量化的渲染。

        Filter：

           mapbox也充分考慮了個別特殊元素的定製化顯示需求，若是要對一批元素中的某些個別元素進行定製化呈現，能夠在layer裏面設置filter，知足條件的元素纔會被呈現出來，並用layer設定的樣式渲染。filter是一個很強大的功能，有效融合在設計中，能夠解決不少問題。

6.

     style文件纔是核心，API只是圍繞着這個核心服務的

     想看API， 能夠參見  https://www.mapbox.com/mapbox-gl-js/api 。