首先来科普一下什么是webgl
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 渲染可以快速改变样式，使得地图的呈现更加多样化
传统的 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 进行修改，与以前的地图库中的叠加图层类似。当然，这也意味着更改图层样式的函数和方法会更细化一点
网友评论