nVisual开发之openlayers加载高性能mvt图层

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图层加载。

 ​文：王剑飞

---