概述
Layer
图层是 Openlayers 中很重要的一个概念和部分,而无论是VectorLayer
矢量图层还是VectorTileLayer
瓦片图层都是继承BaseLayer
实现的。本文主要介绍BaseLayer
的核心部分以及实现。
源码剖析
BaseLayer
类继承自BaseObject
类,其实现如下:
class BaseLayer extends BaseObject {constructor(options) {super();this.on;this.once;this.un;this.background_ = options.background;const properties = Object.assign({}, options);if (typeof options.properties === "object") {delete properties.properties;Object.assign(properties, options.properties);}properties[LayerProperty.OPACITY] =options.opacity !== undefined ? options.opacity : 1;assert(typeof properties[LayerProperty.OPACITY] === "number","Layer opacity must be a number");properties[LayerProperty.VISIBLE] =options.visible !== undefined ? options.visible : true;properties[LayerProperty.Z_INDEX] = options.zIndex;properties[LayerProperty.MAX_RESOLUTION] =options.maxResolution !== undefined ? options.maxResolution : Infinity;properties[LayerProperty.MIN_RESOLUTION] =options.minResolution !== undefined ? options.minResolution : 0;properties[LayerProperty.MIN_ZOOM] =options.minZoom !== undefined ? options.minZoom : -Infinity;properties[LayerProperty.MAX_ZOOM] =options.maxZoom !== undefined ? options.maxZoom : Infinity;this.className_ =properties.className !== undefined ? properties.className : "ol-layer";delete properties.className;this.setProperties(properties);this.state_ = null;}getBackground() {return this.background_;}getClassName() {return this.className_;}getLayerState(managed) {const state = this.state_ || {layer: this,managed: managed === undefined ? true : managed,};const zIndex = this.getZIndex();state.opacity = clamp(Math.round(this.getOpacity() * 100) / 100, 0, 1); // clamp函数保证了透明度的区间在[0,1]之间state.visible = this.getVisible();state.extent = this.getExtent();state.zIndex = zIndex === undefined && !state.managed ? Infinity : zIndex;state.maxResolution = this.getMaxResolution();state.minResolution = Math.max(this.getMinResolution(), 0);state.minZoom = this.getMinZoom();state.maxZoom = this.getMaxZoom();this.state_ = state;return state;}getLayersArray(array) {return abstract();}getLayerStatesArray(states) {return abstract();}getExtent() {return this.get(LayerProperty.EXTENT);}getMaxResolution() {return this.get(LayerProperty.MAX_RESOLUTION);}getMinResolution() {return this.get(LayerProperty.MIN_RESOLUTION);}getMinZoom() {return this.get(LayerProperty.MIN_ZOOM);}getMaxZoom() {return this.get(LayerProperty.MAX_ZOOM);}getOpacity() {return this.get(LayerProperty.OPACITY);}getSourceState() {return abstract();}getVisible() {return this.get(LayerProperty.VISIBLE);}getZIndex() {return this.get(LayerProperty.Z_INDEX);}setBackground(background) {this.background_ = background;this.changed();}setExtent(extent) {this.set(LayerProperty.EXTENT, extent);}setMaxResolution(maxResolution) {this.set(LayerProperty.MAX_RESOLUTION, maxResolution);}setMinResolution(minResolution) {this.set(LayerProperty.MIN_RESOLUTION, minResolution);}setMaxZoom(maxZoom) {this.set(LayerProperty.MAX_ZOOM, maxZoom);}setMinZoom(minZoom) {this.set(LayerProperty.MIN_ZOOM, minZoom);}setOpacity(opacity) {assert(typeof opacity === "number", "Layer opacity must be a number");this.set(LayerProperty.OPACITY, opacity);}setVisible(visible) {this.set(LayerProperty.VISIBLE, visible);}setZIndex(zindex) {this.set(LayerProperty.Z_INDEX, zindex);}disposeInternal() {if (this.state_) {this.state_.layer = null;this.state_ = null;}super.disposeInternal();}
}
BaseLayer
类主要就是设置属性,然后提供get
和set
两大类方法分别用于获取属性和设置属性
BaseLayer
类的构造函数
BaseLayer
类的构造函数接受一个options
对象类型的参数,显示声明三个变量on
,once
和un
,然后设置this.background_
。然后将参数options
赋值给properties
,再判断options.properties
的类型是否是Object
,若它存在且其类型是Object
,则将其赋值给properties
。
再通过一些列的三元判断设置properties
的属性,若options
中的对应的属性不存在,则设置默认值,如:properties.opacity
:透明度,默认为1
;properties.visible
:是否可见,默认为true
;properties.zIndex
:层级,无默认值;properties.maxResolution
:最大分辨率,默认为无穷大
;properties.minResolution
:最小分辨率,默认为0
;properties.minZoom
:最小缩放级别,默认为负无穷
;properties.maxZoom
:最大缩放级别,默认为正无穷大
;
设置对象的className_
,若options.className
存在,则不存在,则赋值为ol-layer
.
最后调用this.setProperties
方法,设置一组集合键值对,然后初始化对象的state_
为null
BaseLayer
类的方法
get
类方法
get
类方法就是调用this.get
方法通过key
去查找对应值,get
方法是在BaseObject
类中定义的,只会返回自身的属性值,若不存在则返回undefined
getBackground
方法:获取this.background_
getClassName
方法:获取this.className_
getLayerState
方法
源码中写道getLayerState
方法并不应由图层或图层渲染器调用,因为如果图层被包含在图层组中,状态会不正确。其内部就是调用各种get
类方法,获取图层的当前值,组成在一个对象中,作为状态返回。
-
getLayersArray
,getLayerStatesArray
和getSourceState
方法均暂未实现 -
getExtent
方法:获取对象的边界范围extent
-
getMaxResolution
方法:获取对象的最大分辨率maxResolution
-
getMinResolution
方法:获取对象的最小分辨率minResolution
-
getMinZoom
方法:获取对象的最小缩放级别minZoom
-
getMaxZoom
方法:获取对象的最大缩放级别maxZoom
-
getOpacity
方法:获取对象的透明度opacity
-
getVisible
方法:获取对象的可见性,返回一个布尔值 -
getZIndex
方法:获取对象的层级,返回一个数字
set
类方法
set
类方法主要是调用set
方法实现的,该方法是在BaseObject
类中定义的,如果新值和旧值不等,会调用notify
方法,若存在该属性的监听事件,就会调用dispatchEvent
派发相应事件。
setBackground
方法
setBackground
方法用于设置对象的background_
,然后调用changed
方法
该方法是在Observable
类中定义的,其内部会调用dispatchEvent
方法,派发类型为change
的注册事件
-
setExtent
方法:设置对象的范围extent
-
setMaxResolution
方法:设置对象的最大分辨率maxResolution
-
setMinResolution
方法:设置对象的最小分辨率minResolution
-
setMaxZoom
方法:设置对象的最大缩放级别maxZoom
-
setMinZoom
方法:设置对象的最小缩放级别minZoom
-
setOpacity
方法:设置对象的透明度,参数必须是一个数字类型的值 -
setVisible
方法:设置对象的可见性 -
setZIndex
方法:设置对象的层级
总结
BaseLayer
类中的方法主要分为两大类,而它们又是基于BaseObject
类中的get
和set
方法实现的。