源码分析之Openlayers中默认Controls控件渲染原理

news2024/12/15 10:24:33

概述

Openlayers 中默认的三类控件是Zoom、Rotate和Attribution

源码分析

`defaults`方法

Openlayers 默认控件的集成封装在defaults方法中，该方法会返回一个Collection的实例，Collection是一个基于数组封装了一些方法，主要涉及到数组项的添加会注册触发一些事件。关于Collection类可以参考源码分析之 Openlayers 中的 Collection 类

defaults方法实现如下：

export function defaults(options) {
  options = options ? options : {};

  const controls = new Collection();

  const zoomControl = options.zoom !== undefined ? options.zoom : true;
  if (zoomControl) {
    controls.push(new Zoom(options.zoomOptions));
  }

  const rotateControl = options.rotate !== undefined ? options.rotate : true;
  if (rotateControl) {
    controls.push(new Rotate(options.rotateOptions));
  }

  const attributionControl =
    options.attribution !== undefined ? options.attribution : true;
  if (attributionControl) {
    controls.push(new Attribution(options.attributionOptions));
  }

  return controls;
}

默认控件的渲染

Openlayers 中的默认控件机制和默认键盘事件机制大同小异，关于 Openlayers 中的默认键盘事件可以参考源码分析之 Openlayers 中默认键盘事件触发机制

赋值

在Map.js中方法中有如下代码：

class Map extends BaseObject {
  constructor(options) {
    const optionsInternal = createOptionsInternal(options);
    this.controls = optionsInternal.controls || defaultControls();
  }
}

function createOptionsInternal(options) {
  let controls;
  if (options.controls !== undefined) {
    if (Array.isArray(options.controls)) {
      controls = new Collection(options.controls.slice());
    } else {
      assert(
        typeof (/** @type {?} */ (options.controls).getArray) === "function",
        "Expected `controls` to be an array or an `ol/Collection.js`"
      );
      controls = options.controls;
    }
  }

  return {
    controls: controls,
  };
}

同Interactions一样，在createOptionsInternal方法中会判断参数options中是否配置了控件，若配置了控件，则判断其类型是否是一个数组，若是数组，则将其转为Collection实例，否则判断其是否存在getArray方法，默认情况下，createOptionsInternal方法的返回值中controls为undefined；因此在Map类中this.controls的值为defaultControls()方法的返回值，即包含Zoom、Rotate和Attribution控件的Collection实例。

注册监听、初始化

默认控件的注册、监听、移除、添加方法都是在Map类中实现的，首先看下代码

class Map extends BaseObject {
  constructor(options) {
    this.controls.addEventListener(CollectionEventType.ADD, (event) => {
      event.element.setMap(this);
    });

    this.controls.addEventListener(CollectionEventType.REMOVE, (event) => {
      event.element.setMap(null);
    });
  }

  this.controls.forEach(
    (control) => {
      control.setMap(this);
    },
  );

  //获取this.controls
  getControls() {
    return this.controls;
  }

  //添加controls
  addControl(control) {
    this.getControls().push(control);
  }

  //移除controls
  removeControl(control) {
    return this.getControls().remove(control);
  }
}

监听和触发

在Map类的构造函数中注册了this.controls的添加和移除的监听事件。通过前面，我们知道this.controls是一个Collection类的实例，而Collection类是继承于BaseObject类，因此this.controls可以通过addEventListener注册监听事件；而调用Collection实例的remove方法会dispatchEvent(new CollectionEvent('remove'))派发remove类型的监听事件；调用Collection实例的push方法会dispatchEvent(new CollectionEvent('add'))派发add类型的监听事件。也就是说addControls方法会执行(event) => {event.element.setMap(this);};,removeControls方法会执行(event) => {event.element.setMap(null);}

初始化渲染

在Map类的构造函数中会调用this.controls.forEach方法，该方法会遍历默认控件的实例，此时就会进行控件的实例化将控件元素添加到DOM中，然后调用执行控件的setMap，在Collection类的介绍中提过，因为 Openlayers 中控件都是基于Control类实现，而Control类中的setMap就是设置this.map_,如此控件的交互对象也就有了。