首先來科普一下什么是webgl
webgl 全拼 Web Graphics Library 是一種3D繪圖協(xié)議，可以為HTML5 Canvas 提供硬件3D加速渲染，web開發(fā)人員可以借助系統(tǒng)顯卡在瀏覽器里更流暢地展示3D場景和模型，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化
核心差異
1.渲染差異
Mapbox GL JS (mapbox graphics library javascript
的核心特點是客戶端渲染
在Mapbox GL JS中創(chuàng)建web應(yīng)用時，通過Javascript和WebGL把地圖作為 vector tiles（矢量瓦片）進行渲染
相比將服務(wù)器的一系列切片圖片組合起來再顯示脸侥，Mapbox GL JS 渲染可以快速改變樣式，使得地圖的呈現(xiàn)更加多樣化
傳統(tǒng)的 JavaScript 地圖庫有兩種完全不同的 "圖層"：
基礎(chǔ)圖層（baselayers）：構(gòu)成地圖基礎(chǔ)的圖像切片盈厘。通常包含大量數(shù)據(jù)——街道地圖包括標(biāo)注睁枕、建筑、圖標(biāo)等細(xì)節(jié)沸手，在瀏覽器上渲染的話效果不會太好外遇。可參考 Mapbox.js 中的?L.mapbox.tileLayer?和 Leaflet 中的?L.TileLayer契吉。
疊加圖層（overlays）：通常包括 GeoJSON 之類的矢量數(shù)據(jù)跳仿，參考 Mapbox.js 中的L.mapbox.featureLayer?和 Leaflet 中的?L.geoJson。和基礎(chǔ)圖層相比栅隐，疊加圖層包含的信息更少塔嬉，但交互性更強：可在 JavaScript 中進行修改玩徊，并且點擊的時候會觸發(fā)彈窗。
Mapbox GL JS 中的圖層是對矢量數(shù)據(jù)或者?raster data的風(fēng)格化呈現(xiàn)谨究。每個圖層都將規(guī)定特定數(shù)據(jù)在瀏覽器中該如何繪制恩袱，渲染器（renderer）會通過這些圖層把地圖渲染到屏幕上。
如下圖所示胶哲，隨著縮放級別的改變畔塔，地圖細(xì)節(jié)也會變化。地形鸯屿、建筑澈吨、公共交通站臺和位置信息都作為其相應(yīng)的圖層來渲染。
由于通過Mapbox GL JS寄摆，瀏覽器中的所有地圖內(nèi)容均以矢量數(shù)據(jù)的形式加載谅辣，Mapbox GL JS 對基礎(chǔ)圖層和疊加圖層不作區(qū)分。因此標(biāo)簽婶恼、圖標(biāo)等地圖要素節(jié)都可以通過 JavaScript 進行修改桑阶，與以前的地圖庫中的疊加圖層類似。當(dāng)然勾邦，這也意味著更改圖層樣式的函數(shù)和方法會更細(xì)化一點
