OpenLayers 图层(Layers) 详解

声明：文章为本人原创，转载或使用请注明作者和出处！！谢谢！

文中代码可以在 https://github.com/QingyaFan/data-visualization 找到。

本文更新的版本可以在我的微信公众号阅读：https://mp.weixin.qq.com/s/CZo7oC26sqX1UyYQoLF2hg

---

如果对现在的地图技术了解的少，看到地图，可能会觉得地图就是一张图片，这张图片可以缩放、移动。这种看法不能说不对，但只是表面现象，实际上地图是由一个或多个图层组成的，不同的图层存储不同类型的地物，如线状图层存储线状地物：道路、河流；点状图层存储POI信息：建筑、店铺等；面状地物存储诸如公园等有一定范围的地物。当然，也有可能不按照地物本身的几何特征划分图层的，比如现在的展示拥堵情况的图层，展示红绿灯位置的图层。

在 OpenLayers 中，图层是使用 layer 对象表示的，主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer) 和 矢量图层(Vector Layer) 五种类型，它们都是继承 Layer 类的。

1、Layer 类

---

OpenLayers 初始化一幅地图(map)，至少需要一个可视区域(view)，一个或多个图层( layer)， 和 一个地图加载的目标 HTML 标签(target)，其中最重要的是图层( layer)。

在 这里 可以看到 layer 基类的定义，类的描述如下：

 * @classdesc
 * Base class from which all layer types are derived. This should only be instantiated
 * in the case where a custom layer is be added to the map with a custom `render` function.
 * Such a function can be specified in the `options` object, and is expected to return an HTML element.
 *
 * A visual representation of raster or vector map data.
 * Layers group together those properties that pertain to how the data is to be
 * displayed, irrespective of the source of that data.

layer 是各种图层的基类，只用于让子类型继承和实现，一般自身不会实例化。主要功能是对矢量数据和栅格数据的可视化。图层渲染结果的样式，主要与数据渲染方式有关，与数据源关系不大。

1.1 属性

初始化时，所有图层类型都具有的参数，如下：

• source，指定了图层的数据来源，图层作用是以一定的样式渲染数据，source则指定了数据；
• className，图层各个元素的样式；
• opacity，透明度，默认为 1 ，即完全透明；
• visible，是否可见；
• zIndex，图层的叠加次序，默认是0，最底层，如果使用setMap方法添加的图层，zIndex值是Infinity，在最上层；
• extent，图层渲染的区域，即浏览器窗口中可见的地图区域。extent 是一个矩形范围，格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。为了提升渲染效率和加载速度，extent范围之外的瓦片是不会请求的，当然也不会渲染；
• minResolution，图层可见的最小分辨率；
• maxResolution，图层可见的最大分辨率；
• minZoom，图层可见的最小zoom level；
• maxZoom，图层可见的最大zoom level

source是一个非常重要的参数，图层中渲染的数据来自于source参数指定的地址，可能是文件，可能是返回地理数据的网络API，不同的source对象类型不一样，source都有哪些可以参考这篇文章。zoom的边界情况也需要注意：是 (minZoom, maxZoom]，图层可见的zoom level大于minZoom，小于等于maxZoom。这与resolution的情况刚好相反[minResolution, maxResolution)。

1.2 事件触发

有的同学问：我想在图层加载完成时，做一些事情，如何知道图层加载完成呢？图层初始化时，我们可以指定很多hook，用以当某些事件触发时做出一定的动作，这些事件中有一个postrender，会在图层渲染完成后触发，我们可以对这个事件传入回调。类似的事件还有prerender。

包含的方法其实没有什么好说的，一般就是对属性的getter和setter，详细的列表可以参考 这里

1.3 行为

我们看到了每种图层都有source可以让我们指定数据来源，那数据是如何变成我们看到的效果的？这就涉及到renderer了，每种图层类型都有一个隐式的属性：renderer_，这个我们从Layer基类的属性定义中可以看到：

/**
 * @private
 * @type {import("../renderer/Layer.js").default}
 */
this.renderer_ = null;

Layer基类还定义了相关方法：

/**
 * Getthe renderer for this layer.
 * @return {import("../renderer/Layer.js").default} The layer renderer.
 */
getRenderer() {