openlayers加载svg_Openlayers 中的图层们

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

对于图层，我们可以从字面上去理解，“图”分成多“层”，一个图片是由多个层构成，熟悉photoshop的对于这个概念应该很熟悉。下面的图可以说很形象了，不同的图层叠置起来最终构成地图。

在 OpenLayers 中，图层可以说是一等公民，是非常核心的概念，随着理解的深入，你会发现所有的概念都是围绕着图层来的。当然，地图(map 对象)是最核心的，也是根本，它是由多个图层构成的，当地图只有一个图层当时候，map 就可以和 layer 画等号；source 是图层当数据源，style 是图层渲染和展现 source 的方式，format 是 source 的类型。也就是说，你看到的地图上的道路、河流、湖泊等都是图层的功劳。例如高德地图右上角的卫星、空气质量、路况、地铁等图层：

Openlayers 中，图层使用 `layer` 对象表示的，主要分为WebGL点图层、热度图(HeatMap)、图片图层(Image)、切片图层(Tile)和矢量图层(Vector)五类，通过上面的讲解，我们可以理解图层是数据的容器，每一类图层就是根据数据来源的格式不同而区分。初始化一幅地图(map)时，至少需要三个参数：

• 一个可视区域(view)，可以理解为我们看待地图的视角，用于控制地图的中心、分辨率，也可以对地图旋转，甚至变换3D视角；

• 一个或多个图层( layer)；

• 一个地图加载的目标 HTML 标签(target)，用于承载地图对html容器。

例如我们看最简单的例子(例子中使用的vue & openlayers)，Map 的构造函数有三个初始化参数，target 对应了 HTML 容器，view 是可视区域，layers 就是图层。

mounted() {
        this.map = new Map({
            target: 'map',        layers: [            new TileLayer({
                    source: new XYZ({
                        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'                })            })        ],        view: new View({
                center: [0, 0],            zoom: 2        })    });}

浏览器打开结果如下

图层( layer)，就是我们今天要讲到的。

---

认识新的人或事物，我们一般都是从人或事物的特征(attribute)、行为(method)，和在特定情况下的事件(event)来作为切入点，进行深入理解。下面我们就循着这样的思路来看看 OpenLayers 中的图层。

1、Layer 基类

layer 是各种图层的基类，只用于具体图层类型的继承。定义了诸多不同图层类型共用的特征和方法。

1.1 属性

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

 - source，图层使用的数据源，可能是文件，也可能是返回数据的API；

 - render，图层使用的渲染器；

 - map，图层归属的地图对象。

从这初始化参数，会发现图层是干啥的也太明显了：图层本人用自己的 render 渲染从 source 接收到的数