LeafLet Control 代码分析

LeafLet Control

Control 代码分析

  Class.extent({
    options:{
      postions:'topright'
    },
    initialize(options){
      Util.setOptions(this,options)
    },
    setPosition(){
      map=this._map
      map.removeControl(this);
      map.addControl(this);
    },
    addTo(map){
      this.remove()
      this._map=map
      //获取地图角落控件容器
      corner = map._controlCorners[pos];

      //插入控件DOM到地图控件容器
      corner.appendChild(container)

      //注册事件： 地图卸载时移除组件
      this._map.on('unload', this.remove, this);
    },
    remove(){
      //移除DOM
      DomUtil.remove(this._container);
      //执行onRomove回调
      if (this.onRemove) {
        this.onRemove(this._map);
      }
      // 反注册事件： 地图卸载是移除组件
	   	this._map.off('unload', this.remove, this);

      //解绑对地图引用
      this._map=null
    }
  })

Map.include Control相关方法

在地图Map类原型链混入Control相关方法

Map.include({
  //添加地图控件-调用控件 addTo方法
	addControl: function (control) {
		control.addTo(this);
		return this;
  },
  //移除地图控件-调用控件 remove方法
	removeControl: function (control) {
		control.remove();
		return this;
  },
  // 在map.initialize 初始化构造时，_initLayout中调用
	_initControlPos: function () {
		var corners = this._controlCorners = {},
		    l = 'ceiec-',
		    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');
	},
    // 地图销毁时调用 map.remove()
	_clearControlPos: function () {
		for (var i in this._controlCorners) {
			DomUtil.remove(this._controlCorners[i]);//移除每个地图工具控件dom
		}
		DomUtil.remove(this._controlContainer);//移除地图工具的容器
		delete this._controlCorners;
		delete this._controlContainer;
	}
});

Control.Attribution

地图注册添加初始化钩子 attributionControl:true，

Map.mergeOptions({
	attributionControl: true
});

Map.addInitHook(function () {
	if (this.options.attributionControl) {
		new Attribution().addTo(this);
	}
});

Control.Scale

Control.Zoom

地图添加初始化 Zoom:true

Map.mergeOptions({
	zoomControl: true
});

Map.addInitHook(function () {
	if (this.options.zoomControl) {
		this.zoomControl = new Zoom();
		this.addControl(this.zoomControl);
	}
});