源码分析之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类是一个抽象类，作为一个基类使用。该类的实现主要包括如下：
- 类定义与初始化
Control类是基于Class.extend定义，因此在构造实例化Control类的子类时，会默认执行initialize方法，在initialize方法中会将参数options设置挂载到实例对象上；
Control类的默认位置选项是topright，其值可能有 topleft, topright, bottomleft 或者 bottomright。
- 控件位置管理
Control类的位置管理主要通过两个函数getPosition和setPosition分别用于获取和设置控制的位置。
setPosition方法的原理是接受一个位置字符串，如上面的值之一，方法内部会先移除控件，重新赋值this.options.position，然后再将控件添加到地图上, 最后返回控件本身。
- 控件容器与生命周期
getContainer方法用于获取控件的HTML ELement。
Control类的生命周期方法就是addTo和remove，分别用于添加和移除控件。
addTo方法
addTo方法接受一个Map对象作为参数，首先会调用remove方法移除控件，然后将控件的位置信息赋值给this.options.position，接着获取控件的容器元素container，并根据位置信息将其添加到地图的相应位置。最后，为地图的unload事件添加一个监听器，当地图卸载时，会自动移除控件。
addTo方法中会调用子类的onAdd方法，该方法会在Control的子类中实现，用于创建具体控件的容器元素，并返回。
remove方法
remove方法用于移除控件，首先会判断控件是否已经添加到地图上，如果没有则直接返回控件本身。接着，会移除控件的容器元素，并调用子类的onRemove方法，该方法也会在Control的子类中实现，用于移除具体控件的容器元素。最后，为地图的unload事件移除监听器，移除控件。
- 焦点管理
Control类还包含一个_refocusOnMap方法，用于在地图上重新获取焦点。该方法接受一个事件对象作为参数，如果事件对象存在且屏幕坐标大于0，则会将地图的容器元素获取焦点。
Map类扩展解析
Map类扩展主要包括以下内容：
- 控件管理
Map类扩展了addControl和removeControl方法，分别用于添加和移除控件。
addControl方法
addControl方法接受一个Control子类的实例作为参数，内部就是调用控件的addTo方法，该方法会在Control的子类中实现，用于将控件添加到地图的相应位置。
removeControl方法
removeControl方法同样也接受Control类的实例作为参数，然后调用实例的remove方法，并返回this。
- 控件容器初始化
Map类扩展了_initControlPos和_clearControlPos方法，分别用于初始化控件容器和清除控件容器。
_initControlPos方法
_initControlPos方法用于初始化控件容器，首先会创建一个名为_controlCorners的对象，用于存储控件的四个角的容器元素。然后，根据位置信息，创建四个角的容器元素，并将其添加到_controlContainer中。最后，将_controlContainer添加到地图的容器元素中。
_clearControlPos方法
_clearControlPos方法用于清除控件容器，首先会遍历_controlCorners对象，将其中的容器元素移除。然后，将_controlContainer移除，并删除_controlCorners和_controlContainer属性。
总结
Control基类是Leaflet中所有控件的基类，负责管理地图控件的创建、定位和生命周期。
Control类的实现主要包括控件位置管理、控件容器与生命周期、焦点管理等。Map类扩展主要包括控件管理和控件容器初始化。