源码分析之Openlayers图层基类BaseLayer介绍

概述

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方法实现的。