Mapbox + deck.gl | Uber如何做地理信息數據可視化？（附案例源碼）

熟悉數據可視化開發的朋友都知道，Uber 的 vis.gl 套件，可以幫助用戶繪製移動趨勢，並且通過數據可視化來了解城市的脈搏。因為涉及到出行、可視化等場景，根據Uber官方博客介紹，Uber 選擇與開源的全球地圖平台 Mapbox 合作，加強數據可視化工具的開發，並豐富開源社區的內容提高活躍度。

Mapbox GL JS v0.50支持將第三方圖層集成到deck.gl中相似的WebGL環境中，這個功能幫助deck.gl的用戶能夠處理更大範圍的用例，在易用性、靈活性和豐富性上更上一層樓。

Uber的開源工具Deck.gl和Mapbox GL JS經常被組合使用，可以創建炫酷的地理信息可視化效果。Deck.gl的MapView旨在與Mapbox基本地圖協同工作，兩個庫中相同的相機設置（中心，縮放，間距和方位）可以進行無縫匹配，在幾乎所有的地理空間數據應用程序中，Mapbox都被用作deck.gl可視化層的背景。

Mapbox GL JS最新版本（v0.50）中的新功能使第三方圖層可以繪製到相同的WebGL環境中。 這為更緊密集成的地理空間可視化開闢了許多新的可能性。 例如，可以在Mapbox的基礎地理和標籤圖層之間插入deck.gl GeoJSON圖層，這樣填充的多邊形不再妨礙地圖的可讀性； Deck.gl的弧形圖層和Mapbox的建築物圖層可以同時出現在城市的空域，3D元素也可以正確地相互遮擋。

單獨使用

結合使用

具體來說，Uber在deck.gl的V6.2版本中推出了新的模塊@deck.gl/mapbox，您可以到Github上研究研究開源代碼，也可以繼續看下面的快速上手教程：

deck.gl和Mapbox圖層結合使用的效果

快速上手教程

全新的實驗類MapboxLayer是Mapbox GL JS的自定義圖層界面的實現，我們可以使用nmp導入。

npm install @deck.gl/mapbox
import {MapboxLayer} from 『@deck.gl/mapbox』;

或者使用 deck.gl standalone bundle。

<script src=」https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>

<script src=』https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js></script>
<script type=」text/javascript」> const {MapboxLayer} = deck; </script>

MapboxLayer的實例可以通過map.addLayer()（https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/）載入到Mapbox圖層中，類構造函數有兩種風格，一種用於Mapbox開發人員，另一種用於deck.gl開發人員。