Mapbox矢量切片源码分析

为了了解矢量切片的更多技术细节,轻微挖一挖Mapbox-gl-js的前端结构。比较关键的内容是矢量切片如何在前端如何被定义、加载和绘制,下面结合源码稍微介绍下。

概念

矢量切片规范

Mapbox矢量切片规范定义的内容:文件格式(后缀名、MIME)、投影和范围、内部结构(图层、要素、几何图形编码、要素属性)。切片文件里不在是地理坐标(例如经度和纬度),而是屏幕坐标,也并不包含任何地理信息。在切片文件里,原点坐标是左上角,x轴向右递增,y轴向下递增。

绘制

Mapbox-gl-js使用客户端绘制,这是vector tiles在前端最核心的部分,也因为此,在前端运行时修改地图样式变得轻而易举。大多数地图前端SDK或api(如arcgis、openlayers、leaflet),决定mapview的通常就是center point + zoom level(或 center point + extent),在矢量绘制情况下,zoom level可以是任意的,包括小数(例如6.5),应该基本上算是无极缩放了。除此之外,还有两个很重要的参数:
1. bearing:地图旋转参数,单位是度数。
2. pitch:地图倾斜角度(3d才cool嘛)。

在图层方面,Mapbox gl中定义了渲染数据的方式,这些数据即可以是栅格,也可以是矢量。但由于前端渲染,所以实际上底图和专题图在技术实现上,并没有实质的区别。这样的好处是,所有的要素都可以如同arcgis下的GraphicLayer,或者Javascript中的div一般可拥有较可控的交互能力。

camera和Map

Mapboxgl.camera控制目标位置的中心点位置、缩放级别、旋转角度和倾斜角度。Mapboxgl.Map对象是提供开发接口的最基本对象,继承自camera,并在初始化的时候通过container的设置(HTML元素)来告知Mapboxgl渲染出对应的Map对象。

继续阅读Mapbox矢量切片源码分析