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 。