源码分析之Leaflet中control模块Control基类实现原理

概述

Control基类是通过Class.extend定义，是Leaflet中所有控件的基类，负责管理地图控件（如缩放控件、比例尺等）的创建、定位和生命周期。

在Control.js中除了定义Control基类，还包括关于Map类的扩展，主要包括管理控件（控件的添加或移除）以及控件容器的初始化。

源码分析

源码实现

Control基类和Map类扩展的源码实现如下：

export var Control = Class.extend({
  options: {
    position: "topright",
  },
  initialize: function (options) {
    Util.setOptions(this, options);
  },
  getPosition: function () {
    return this.options.position;
  },
  setPosition: function (position) {
    var map = this._map;

    if (map) {
      map.removeControl(this);
    }

    this.options.position = position;

    if (map) {
      map.addControl(this);
    }

    return this;
  },
  getContainer: function () {
    return this._container;
  },
  addTo: function (map) {
    this.remove();
    this._map = map;

    var container = (this._container = this.onAdd(map)),
      pos = this.getPosition(),
      corner = map._controlCorners[pos];

    DomUtil.addClass(container, "leaflet-control");

    if (pos.indexOf("bottom") !== -1) {
      corner.insertBefore(container, corner.firstChild);
    } else {
      corner.appendChild(container);
    }

    this._map.on("unload", this.remove, this);

    return this;
  },
  remove: function () {
    if (!this._map) {
      return this;
    }

    DomUtil.remove(this._container);

    if (this.onRemove) {
      this.onRemove(this._map);
    }

    this._map.off("unload", this.remove, this);
    this._map = null;

    return this;
  },
  _refocusOnMap: function (e) {
    if (this._map && e && e.screenX > 0 && e.screenY > 0) {
      this._map.getContainer().focus();
    }
  },
});

export var control = function (options) {
  return new Control(options);
};

Map.include({
  addControl: function (control) {
    control.addTo(this);
    return this;
  },
  removeControl: function (control) {
    control.remove();
    return this;
  },
  _initControlPos: function () {
    var corners = (this._controlCorners = {}),
      l = "leaflet-",
      container = (this._controlContainer = DomUtil.create(
        "div",
        l + "control-container",
        this._container
      ));

    function createCorner(vSide, hSide) {
      var className = l + vSide + " " + l + hSide;

      corners[vSide + hSide] = DomUtil.create("div", className, container);
    }

    createCorner("top", "left");
    createCorner("top", "right");
    createCorner("bottom", "left");
    createCorner("bottom", "right");
  },
  _clearControlPos: function () {
    for (var i in this._controlCorners) {
      DomUtil.remove(this._controlCorners[i]);
    }
    DomUtil.remove(this._controlContainer);
    delete this._controlCorners;
    delete this._controlContainer;
  },
});

源码详细解析

Control类解析

Control类是一个抽象类，作为一个基类使用。该类的实现主要包括如下：

1. 类定义与初始化

Control类是基于Class.extend定义，因此在构造实例化Control类的子类时，会默认执行initialize方法，在initialize方法中会将参数options设置挂载到实例对象上；

Control类的默认位置选项是topright，其值可能有 topleft, topright, bottomleft 或者 bottomright。

2. 控件位置管理

Control类的位置管理主要通过两个函数getPosition和setPosition分别用于获取和设置控制的位置。

setPosition方法的原理是接受一个位置字符串，如上面的值之一，方法内部会先移除控件，重新赋值this.options.position，然后再将控件添加到地图上, 最后返回控件本身。

3. 控件容器与生命周期

getContainer方法用于获取控件的HTML ELement。

Control类的生命周期方法就是addTo和remove，分别用于添加和移除控件。

• addTo方法

addTo方法接受一个Map对象作为参数，首先会调用remove方法移除控件，然后将控件的位置信息赋值给this.options.position，接着获取控件的容器元素container，并根据位置信息将其添加到地图的相应位置。最后，为地图的unload事件添加一个监听器，当地图卸载时，会自动移除控件。

addTo方法中会调用子类的onAdd方法，该方法会在Control的子类中实现，用于创建具体控件的容器元素，并返回。

• remove方法

remove方法用于移除控件，首先会判断控件是否已经添加到地图上，如果没有则直接返回控件本身。接着，会移除控件的容器元素，并调用子类的onRemove方法，该方法也会在Control的子类中实现，用于移除具体控件的容器元素。最后，为地图的unload事件移除监听器，移除控件。

4. 焦点管理

Control类还包含一个_refocusOnMap方法，用于在地图上重新获取焦点。该方法接受一个事件对象作为参数，如果事件对象存在且屏幕坐标大于0，则会将地图的容器元素获取焦点。

Map类扩展解析

Map类扩展主要包括以下内容：

1. 控件管理
   Map类扩展了addControl和removeControl方法，分别用于添加和移除控件。

• addControl方法

addControl方法接受一个Control子类的实例作为参数，内部就是调用控件的addTo方法，该方法会在Control的子类中实现，用于将控件添加到地图的相应位置。

• removeControl方法

removeControl方法同样也接受Control类的实例作为参数，然后调用实例的remove方法，并返回this。

2. 控件容器初始化
   Map类扩展了_initControlPos和_clearControlPos方法，分别用于初始化控件容器和清除控件容器。

• _initControlPos方法

_initControlPos方法用于初始化控件容器，首先会创建一个名为_controlCorners的对象，用于存储控件的四个角的容器元素。然后，根据位置信息，创建四个角的容器元素，并将其添加到_controlContainer中。最后，将_controlContainer添加到地图的容器元素中。

• _clearControlPos方法

_clearControlPos方法用于清除控件容器，首先会遍历_controlCorners对象，将其中的容器元素移除。然后，将_controlContainer移除，并删除_controlCorners和_controlContainer属性。

总结

Control基类是Leaflet中所有控件的基类，负责管理地图控件的创建、定位和生命周期。

• Control类的实现主要包括控件位置管理、控件容器与生命周期、焦点管理等。
• Map类扩展主要包括控件管理和控件容器初始化。