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矢量切片源码分析

矢量地图切片技术分析

1. 什么是矢量切片

传统的栅格地图切片,是预先在Server端绘制好固定的PNG和JPG切片集合。而矢量切片是很早就已经出现,并已通过各种不同的技术手段在应用中表现出来,大多以json或二进制文件将矢量地图数据传输至前端进行绘制。例如百度地图、Google地图等都较早实现了栅格和矢量两种模式。

矢量地图切片将矢量数据通过不同的描述文件来组织和定义,通常通过自定义文件或json文件进行传输,在前端按需请求不同的矢量瓦片数据文件,并利用类似canvas等技术进行绘制。使用这种技术有不少好处,例如不再需要为不同的样式而反复进行制图、渲染、切片、更新service等过程,并且在当前各种高分屏、视网膜屏大肆发展的阶段,避开按照特定DPI和分辨率渲染的栅格图片在不同的显示设备上无法以统一清晰的效果呈现,等等。

当前,矢量切片已经广泛应用开了,现在的在OSM数据中得到了广泛的使用,例如这个站点提供了OSM Planet和分国家区域的daily下载包,并且以MBTiles文件的形式提供。

 

1.1 矢量切片规范

Mapbox提出了Vector Tile的开放规范,并遵守Creative Commons Attribution 3.0 United States License:Mapbox Vector Tile Specification,该规范用到了Google的Protocol Buffers作为数据编码规范。同样被Mapbox列入规范的还有MBTiles is a specification,作为在SQLite中存储切片数据的规范。在两者的github页面上,都可以找到对应规范的实现清单,这些实现大多是开源工具,也包含一些闭源软件,而这些所有,足以支撑起矢量切片的数据转换、数据存储、数据服务的全技术架构的基本骨架。

继续阅读矢量地图切片技术分析