webgl 全拼 Web Graphics Library 是一种3D绘图协议，可以为HTML5 Canvas 提供硬件3D加速渲染，web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化
核心差异
1.渲染差异
Mapbox GL JS (mapbox graphics library javascript
的 核心特点 是 客户端渲染
在Mapbox GL JS中创建web应用时，通过Javascript和WebGL把地图作为 vector tiles（矢量瓦片）进行渲染
相比将服务器的一系列切片图片组合起来再显示，Mapbox GL JS 渲染可以快速改变样式，使得地图的呈现更加多样化
2. 图层（layers）
传统的 JavaScript 地图库有两种完全不同的 " 图层 "：
基础图层（baselayers） ：构成地图基础的 图像切片 。通常包含大量数据——街道地图包括标注、建筑、图标等细节，在浏览器上渲染的话效果不会太好。可参考 Mapbox.js 中的 L.mapbox.tileLayer 和 Leaflet 中的 L.TileLayer。
叠加图层（overlays）：通常包括 GeoJSON 之类的矢量数据，参考 Mapbox.js 中的L.mapbox.featureLayer 和 Leaflet 中的 L.geoJson。和基础图层相比，叠加图层包含的信息更少，但交互性更强：可在 JavaScript 中进行修改，并且点击的时候会触发弹窗。
Mapbox GL JS 中的图层是对矢量数据或者 raster data 的风格化呈现。每个图层都将规定特定数据在浏览器中该如何绘制，渲染器（renderer）会通过这些图层把地图渲染到屏幕上。
如下图所示，随着缩放级别的改变，地图细节也会变化。地形、建筑、公共交通站台和位置信息都作为其相应的图层来渲染。
由于通过Mapbox GL JS，浏览器中的所有地图内容均以矢量数据的形式加载，Mapbox GL JS 对基础图层和叠加图层不作区分。因此标签、图标等地图要素节都可以通过 JavaScript 进行修改，与以前的地图库中的叠加图层类似。当然，这也意味着更改图层样式的函数和方法会更细化一点
还记得《哈利•波特》里的那张 活点地图 吗？
你有没有注意到，这张可以用来实时监测霍格沃茨人物活动状况的地图，其实就是我们现在经常提到的实时地图（Real-time map），嗯，“麻瓜”（没有魔法的普通人如你我）世界中人类的“活点地图”。
不过其实更接近于活点地图的应用，还属去年Snapchat 与Mapbox 合作上线的那款App Snap Map （详情可点击查看 Snapchat 与Mapbox 强强联手推出 Snap Map ）。
这款类似“找朋友”游戏的App，可以让你实时查看好友的位置，并与他们进行即时互动。
除了在社交网络上找朋友，活点（实时）地图在现实世界中还可以有怎样的应用？
下面就为你介绍 三个案例 ，简单学习一下，指不定哪天你有需要用 Mapbox GL JS 自制一份活点地图的时候呢。
