OpenLayers(以下简称ol)是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。OpenLayers支持从OSM、Bing、MapBox、Stamen和其他任何你能找到的XYZ瓦片资源中提取地图瓦片并在前端展示。同时也支持OGC的WMTS、WMS、WFS规范的瓦片服务以及ArcGIS规范的瓦片服务。
在没有第三方的支持下,ol可利用'ol/layer/Tile'类与'ol/source/Tile'类可以获取mvt的数据流然后展示在地图上,但是当节点数量规模庞大到数十万时,性能瓶颈便展现出来。于是,高性能的mvt图层载体便呼之欲出。
关于高性能的加载mvt,我们首选的是mapbox-gl(以下简称mgl)。mgl是基于WebGL的开源地图引擎,可以像ol那样加载各种源的地图,因此mgl也会实例化一个map,同样是实例,我们如何兼容一起呢,这就需要我们把mgl转化成一个图形加载到ol的serView方法中。
我们来分析mgl实例如何转化可加载的图层。
如上图,我们首先要实例化一个mgl实例,和ol一样,要指定一个页面元素作为容器,这个容器我们指定的和ol的是一样的。version是必填项,我们这里应用版本8。type有多种,我们这里应用的mvt是失量类型,所以必然是“vector”。sources是一个对象,一个key对应一条数据源,并且这个key在下面会多次应用到。tiles是一个数组,可以包含多条数据请求。layers是一个数组,每个元素代表了一个图层,每个图层应用的数据源source就是上述中提到的key,每个图层的type可以指定所要渲染的图形类型,mgl中的图形类型有多种,我们这里只应用了circle和line两种,绑定好后可在paint中指定所要渲染的图形样式。
如上图,我们实例化一个ol的ol/layer/Layer类,然后重写render方法。我们获取mgl的地图实例中的canvas,设置它的样式以满足视图基本需要。viewState参数中包含了地图的常用信息,中心点、级别、角度等。mgl实例jumpTo方法指定center视图的中心点,zoom的级别,bearing相机(视角)所朝向的方向,animate是否采用动画效果。最后执行mgl实例的_render()方法渲染后返回一个canvas。这样我们声明的mbLayer就可以像ol自己声明的'ol/layer/Tile'类一样来加载图层了。
这时我们在地图看到与之前引用的ol.layer.Tile类时对比时,地图渲染的速度与页面的流畅度都肉眼可见的提高,这就是我们要达到的目标-高性能的mvt图层加载。
文:王剑飞