mapbox.gl源碼解析——基本架構與數據渲染流程

加載地圖

　Mapbox GL JS是一個JavaScript庫,使用WebGL渲染交互式矢量瓦片地圖和柵格瓦片地圖。WebGL渲染意味着高性能,MapboxGL可以渲染大量的地圖要素,擁有流暢的交互以及動畫效果、能夠顯示立體地圖而且支持移動端,是一款十分優秀的WEB GIS開發框架。

在頁面引入MapboxGL腳本庫和樣式庫:

<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script><link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet'/>

    也能夠在GitHub找到MapboxGL : https://github.com/mapbox/mapbox-gl-js/releases

    執行上述引入腳本後即建立了mapboxgl對象,經過它可使用MapboxGL的所有功能。 
在使用以前,須要先設置mapboxgl.accessToken。access tokens(訪問令牌)可使用API提供的示例(以下),也能夠註冊MapBox帳號,在用戶信息頁查看或者建立令牌。

　接下來使用建立地圖實例。主要配置項以下：

const myMap = new mapboxgl.Map({
  container: '<Id of Container Element>',
  style: '<Your Style Here>',
  center: [112.508203125, 37.97980872872457],
  zoom: 4,
  pitch: 0,
  bearing: 0,
});

 

基本架構

　mapbox的架構有些奇怪，接口層和邏輯層其實沒有明確的區分；mapbox中style是一個比較重要的類；統轄整個數據層次；Painter中集成了draw和style兩個模塊

 

數據處理流程

數據加載與渲染流程

 

數據的加載與解析在source中；主要有兩部分組成，邏輯部分在主線程中好比：
vector_tile_source、geojson_source中
而實際的加載解析則是在對應的worker中，好比：
vector_tile_worker_source、geojson_worker_source中

以vector_tile_source和vector_tile_worker_source爲例介紹，實際的數據解析在vector_tile_worker_source中的loadTile方法，這裏接收主線程中傳遞的參數，以及子線程的回調函數，應該是Actor中的done函數

進而進入
loadVectorData函數，getArrayBuffer是調用普通的ajax去請求二進制數據，與室內的數據方式同樣。數據請求成功後，將二進制數據實例化成一個

PBF是一個協議二進制格式，他裏面提供了一些方法，方便按照必定的規則來解析二進制數據。

這裏是VectorTile中的一個VectorTileLayer讀取到的二進制字段；這裏的解析是把二進制轉化成js對象，裏面的數據還須要進一步轉換成可用的幾何數據和屬性數據。

由於mabox的二進制編碼使用的是谷歌的二進制編碼方式，因此能夠直接使用PBF這個npm包來進行解碼

LoadVectorData加載完後數據進入回調函數中；

接下來進入WorkerTile中的parse方法，開始各類解析數據；這裏面要看一下LayerIndex這個對象是StyleLayerIndex的一個實例，裏面存放一些跟樣式相關的屬性

而後從sourceLayer中獲取VectorTileFeature，實際也是從pbf中解析數據

接下來是建立bueket並調用bucket的populate方法

polulate能夠理解爲首先根據比例進行數據縮放，而後調用addFeature方法，將Feature的幾何圖形信息添加到bucket的vertexArray中，而後FeatureIndex記錄一些信息。
不一樣的Bucket的polulate方法也不一樣，addFeature方法更不一樣。像SymbolBucket添加到vertexArray中的就不是單一的點信息，而是文本盒子的信息。