摘要：最近在折騰的端的可視化項目，由于相關業務的需要，用到了這一地圖開發的神器。其技術奠基于與。分別指縮放級別地面法線偏移角地軸偏移角等，用以確定當前視窗所顯示的地圖區域和空間關系。個人認為其最大的亮點在于即使不了解內部實現，也不影響其使用。

最近在折騰的 web 端的可視化項目，由于相關業務的需要，用到了 Mapbox 這一地圖開發的神器。在此先奉上一個基于mapbox-gl實現的demo（來源：uber的deck.gl項目）：

下面我們從這個項目一步步來介紹 Mapbox 的前端 GIS 引擎?Mapbox GL JS.

首先，Mapbox 在地圖領域是一家很 Newbee 的公司。已為 Foursquare、Pinterest、Evernote、金融時報、天氣頻道、優步科技 等公司的網站提供了訂制在線地圖服務。

自2010年起，該公司快速地拓展了訂制地圖的市場地位，以回應 Google地圖 等地圖供應商提供的有限選擇。Mapbox 是一些開放源代碼地圖庫及應用程序的創建者或最大的貢獻者，其中包含了MBTiles 規范、TileMill 制圖 IDE、Leaflet JavaScript 庫，以及 CartoCSS 地圖格式化語言與語法分析器等。

該公司的數據同時從開放與專有的來源獲取，開放的數據源如 開放街圖（OSM, Open Street Map） 以及 NASA 等，而專有的數據源則包含了 DigitalGlobe。其技術奠基于 Node.js、CouchDB、Mapnik、GDAL 與 Leafletjs。

Mapbox 針對不同平臺均開發了相應的 GIS 引擎以滿足開發者或相關用戶的需要，如：iOS SDK（用于iOS端開發）、Android SDK（用于Andriod端開發）、Navigation SDK（用于Navigation端開發）、Unity SDK（用于Unity端開發）、GL JS（用于web端開發）。不同平臺的SDK，除使用方式不同外，功能特性上也多多少少存在不同。此外，Uber還針對react開發了?react-map-gl。總的來說，Mapbox的開源技術棧是非常全面的。

mapbox-gl 的 文檔 由 API、Style Specification、Example、Plugins 四部分內容組成。

顧名思義，API 是一般框架(類庫)提供給用戶的全部接口（方法）的說明書；Style Specification 是 Mapbox 地圖的樣式規范；Example 是一些常用功能或常見業務的代碼示例，囊括了使用 Mapbox 所能實現的大部分功能效果；Plugins 則是官方推薦的可與 mapbox-gl 一同使用的一些增效插件和開源項目，如一些第三方的UI控件、顯示類插件、框架集成工具、開發輔助工具、實用工具類庫等等。

對于初了解 Mapbox 的童鞋，建議先從官網的 Example 入手，能夠較快掌握 mapbox-gl 的使用并投入開發實踐。

下面以文章開頭展示的項目為主，介紹其實戰步驟。

由于使用在線地圖服務和 style 時需要驗證用戶 token，所以在使用 mapboxgl 時需要先配置用戶 token（在Mapbox官網注冊用戶即可獲取）。

import mapboxgl from "mapbox-gl";
mapboxgl.accessToken = "";

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

const myMap = new mapboxgl.Map({
  container: "",
  style: "",
  center: [112.508203125, 37.97980872872457],
  zoom: 4,
  pitch: 0,
  bearing: 0,
});

其中，container 是地圖容器的元素 id，style 是地圖樣式的 url，或者你自己定義的 style（需遵循Mapbox樣式規范），center 是地圖加載后默認的中心點位置，用以定位地圖加載時的位置。zoom pitch bearing 分別指縮放級別、地面法線偏移角、地軸偏移角等，用以確定當前視窗所顯示的地圖區域和空間關系。配置項的意義均可查看官網文檔。

這里主要介紹視頻中的3D建筑、飛線動畫等是如何實現的。這里以相關代碼片段來介紹實踐的方法。

在Mapbox中繪制圖形時， layer 和 source 是最重要的一組概念，后者用于存儲圖形的數據內容，前者則是圖形在3D場景中的表現（圖層）。在Mapbox中，圖層一旦被創建，與其同名（id相同）的數據源源（即source）也必然被創建。反之，也可以在創建source后再創建一個圖層使用這個已創建的數據源，這時數據源與圖層間并不要求同名。而我們通過改變數據來驅動圖形變化，便是才去的第二種方式：

// 創建id為buildings的數據源
myMap.addSource("buildings", {
 type: "geojson",
 data: "",
});

// 使用buildings的數據來繪制id為building_layer的圖形
myMap.addLayer({
  id: "building_layer",
  type: "fill-extrusion",
  source: "buildings",
  ...,
});

基于上面的方式，當數據改變時，我們只需要重設數據源的數據，即可驅動圖層重繪：

if (myMap.getLayer("building_layer")) {
  myMap.getSource("buildings").setData();
}

至于3D效果及動畫的具體實現，這里給出兩個官網上的示例，相信大家能一目了然：

i.?用3D形式呈現建筑?
ii.?給路徑中的一個點添加動畫效果

Mapbox提供的交互方法是比較靈活的，活學活用API文檔便能實現各種炫酷、實用的交互效果。比如：使用
myMap.on("zoom", callback) 可以將圖形與地圖的縮放相綁定，當縮放系數小于某個值時，可以隱藏掉一些圖形元素：

myMap.on("zoom", () => {
  if (myMap.getZoom() <= 4) {
    myMap.setLayoutProperty("building_layer", "visibility", "none");
  } else {
    myMap.setLayoutProperty("building_layer", "visibility", "visible");
  }
});

再比如，連續調用 myMap.flyTo() 的方法使視圖在地圖上按照一定的軌跡緩慢移動，可以給用戶一種模擬飛行的體驗。視頻中的自動巡視的效果正是這樣實現的。

諸如 click mouseover popup 等效果，官網文檔中的示例已經具體呈現，這里就不詳細展開了。

由于 Mapbox 地圖服務使用 MBTiles 存儲數據，目前很多地圖服務都接受了這套標準（如：OSM，Open Street Map）。所以可以通過搭建自己的 tiles-server 以替代直接使用 Mapbox 的在線地圖服務。

這樣做的好處是顯而易見的：一是可以通過負載均衡等手段提高數據接口的訪問速度，有效提高數據的加載速度；一是保障應用能在零帶寬的環境下仍能有效部署和使用。

這里墻裂安利一個docker開源鏡像：openmaptiles-server ，在其 官網 和 dockerhub 上均可下載。個人認為其最大的亮點在于——即使不了解內部實現，也不影響其使用。

運行 tiles-server 服務的 docker 命令如下：

$ docker run --rm -it -v $(pwd):/data -p 8080:80

然后剩下來需要做的事情就是打開其導航頁面 http://localhost:8080/（端口號取決于你的啟動命令），然后跟著頁面上的提示一步一步設置就好了（最后一步設置后會從OSM走動下載地圖，所以一開始你不用擔心數據從哪來），完全是傻瓜式的部署。

在 Mapbox GL 實踐的過程中，發現了一些影響應用整體性能的因素，故而在此陳述一番，為之后填坑的童鞋提供一些經驗：

使用geo數據（如 GeoJson 格式數據）來定義圖形的時候，若數據量過大，則會拖慢數據加載的速度，此時可考慮：

i. 在 http 請求前后對數據進行合理的壓縮和解壓，以盡可能節省 http 請求傳輸的數據量；
ii. 條件允許的情況下，可將一組數據分片加載，以空間換時間。

在 Mapboox 中繪制的圖層不宜過多，一是不方便管理（當然，github上有很多管理Mapbox圖層的第三方工具），一是圖層過多會明顯降低GL的渲染和響應性能。所以在繪制圖形前，可以先考慮一下圖層的劃分，以最少的圖層實現盡可能多的效果。

數據量相同的情況下，使用 mapboxgl.Marker 來添加標記，其性能不如使用 type 為 symbol 類型的圖層來添加標記。原因在于前者生成的標記是一個個 DOM 元素，如果你可以想象在一個 web 頁面中同時操作成百上千個 DOM 節點會是什么結果，那么你或許能明白我的建議。

最后，在此總結下個人對 Mapbox 的一些感觀。

Mapbox 的產品定位是隨時隨地的 GIS（跨平臺、應用），它為我們提供了一系列的簡單操作的 API，使得 GIS 開發變得靈活而有趣。尤其對于開發 GIS 類型的數據可視化應用，Mapbox 是絕佳的選擇。

然而，如果你只是為了那些絢麗的 3D 效果的話，或許選擇專門的框架更為合適。