声明:文章为本人原创,转载或使用请注明作者和出处!!谢谢!
如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层。
在 OpenLayers 中,图层是使用 layer 对象表示的,主要有 热度图层(heatmaplayer)、图片图层(imagelayer)、切片图层(tilelayer) 和 矢量图层(vectorlayer) 四种类型,它们都是继承 Layer 类的。
1、Layer 类
OpenLayers 初始化一幅地图(map),至少需要一个可视区域(view),一个或多个图层( layer), 和 一个地图加载的目标 HTML 标签(target),其中最重要的是图层( layer)。
在 这里 可以看到 layer 类的定义,类的描述如下:
/**
* @classdesc
* Abstract base class; normally only used for creating subclasses and not
* instantiated in apps.
* 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 是一个虚基类,只用于让子类型继承和实现,自身不能实例化。主要功能是对 矢量地图数据 和 栅格地图数据的可视化表达。图层的外观,主要与数据渲染方式有关,与数据的来源关系不大。
初始化时,传入的参数有:
brightness,亮度,默认为 0 ;
contrast,对比度,默认为 1 ;
hue,色调,默认为0 ;
opacity,透明度,默认为 1 ,即完全透明;
saturation,饱和度,默认为 1 ;
source,图层的来源,如果在构造函数中没有传入相应的参数,可以调用 ol.layer.Layer#setSource方法来设置来源: layer.setSource(source) ;
visible,是否可见,默认为 true ;
extent,图层渲染的区域,即浏览器窗口中可见的地图区域。extent 是一个矩形范围,格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。如果没有设置该参数,图层就不会显示;
minResolution,图层可见的最小分辨率,当图层的缩放级别小于这个分辨率时,图层就会隐藏;
maxResolution,图层可见的最大分辨率,当图层的缩放级别等于或超过这个分辨率时,图层就会隐藏。
包含的共有方法有:
- getLayersArray( ),得到所有图层组成的数组;
- getLayerStatesArray( ),得到所有图层状态组成的数组;
- getSource( ),得到相应图层的来源;
- getSourceState( ),得到相应图层的来源状态;
- handleSourceChange_( ),处理 source 变动的函数;
- handleSourcePropertyChange_( ),处理 source 属性变动的函数;
- setSource( ),设置图层 source 属性,参数为一个 source 对象。
包含的私有方法有:
- visibleAtResolution( ),参数是 layerState 和 resolution,如果图层可见,返回 true ,如果传入了 resolution,也会比较 resolution 是否在 minResolution 和 maxResolution 之间。
在构造函数传入的参数中,source 是一个比较重要的属性,没有它,图层就没有实质性内容,这个 source 是什么呢,打开 ol.source 目录可以看到,有一个 source 基类,其余都是继承其的子类,这些子类非常的多:
imagesource.js(imagelayer的图层来源基类)
imagecanvassource.js
imagemapguidesource.js
imagestaticsource.js
imagevectorsource.js
imagewmssource.js
tilesource.js(切片图层 – tilelayer的来源基类)
tilearcgisrestsource.js
tiledebugsource.js
tilejsonsour