概述

Openlayers 中内置了9类控件，这9类控件都是基于Control类，而Control类则是继承于BaseObject类，如下图所示：

如上，这9类控件分别是：

• Attribution：属性控件
• FullScreen:全屏控件
• MousePosition：鼠标位置控件
• OverviewMap:鹰眼控件
• Rotate：旋转控件
• ScaleLine：比例尺控件
• Zoom:缩放控件
• ZoomSlider：滑动缩放控件
• ZoomToExtent：缩放到指定视图范围控件

本文主要介绍控件的基类Control类。

源码剖析

Control类的实现如下：

class Control extends BaseObject {
  constructor(options) {
    super();
    const element = options.element;
    if (element && !options.target && !element.style.pointerEvents) {
      element.style.pointerEvents = "auto";
    }

    this.element = element ? element : null;

    this.target_ = null;
    this.map_ = null;

    this.listenerKeys = [];

    if (options.render) {
      this.render = options.render;
    }

    if (options.target) {
      this.setTarget(options.target);
    }
  }
  disposeInternal() {
    this.element?.remove();
    super.disposeInternal();
  }
  getMap() {
    return this.map_;
  }
  setMap(map) {
    if (this.map_) {
      this.element?.remove();
    }
    for (let i = 0, ii = this.listenerKeys.length; i < ii; ++i) {
      unlistenByKey(this.listenerKeys[i]);
    }
    this.listenerKeys.length = 0;
    this.map_ = map;
    if (map) {
      const target = this.target_ ?? map.getOverlayContainerStopEvent();
      target.appendChild(this.element);
      if (this.render !== VOID) {
        this.listenerKeys.push(
          listen(map, MapEventType.POSTRENDER, this.render, this)
        );
      }
      map.render();
    }
  }

  render(mapEvent) {}
  setTarget(target) {
    this.target_ =
      typeof target === "string" ? document.getElementById(target) : target;
  }
}

Control类的构造函数

Control类的构造函数接受一个参数对象options,先是判断options.element、!element.style.pointerEvents以及!options.target是否存在，若为true，则修改element元素的样式，element对应的就是控件的HTML Element;然后初始化this.element,若options.element不存在，则this.element为null，反之为options.element;初始化this.target_和this.map_为null;初始化this.listenerKeys为[];最后判断options.render是否存在，若存在则覆盖this.render方法；判断options.target是否存在，若存在，则调用this.setTarget方法。

Control类的主要方法

Control类作为控件基类，它定义的方法很少，主要有如下几个：

• setTarget：接受一个参数target，若target是一个字符串，则调用document.getElementById获取DOM节点，否则直接赋值，默认情况下，控件是会添加到overlay container中，这个方法会改变这个一默认行为

• getMap: 获取this.map_

• setMap:Control类的核心方法，接受一个参数map对象，若this.map_存在该控件元素，则移除元素；并且循环遍历this.listenerKeys移除注册的事件监听，并且清空this.listenerKeys，设置this.map_的值；然后判断参数map是否存在，若存在，则重新添加控件元素到overlay container中，然后判断this.render是否是空方法，若不为空方法，则调用listen方法注册postrender类型的事件监听，this.render方法即为注册的回调函数，本质上它是子类中定义的一个方法；最后调用map.render方法。

• render方法：空函数，会被Control的子类覆盖

• disposeInternal方法：清除方法，会移除控件元素，调用父类的disposeInternal方法移除监听

总结

本文主要介绍了 Openlayers 中的控件类型分类以及控件基类Control类的实现。