L.Control

所有leaflet控制的基础类。继承自IControl接口。 你可以这样添加控件:

control.addTo(map);
// the same as
map.addControl(control);

构造器

构造器 使用 描述 L.Control(
<Control options> options? )new L.Control(…) 
L.control(…) 通过给定的选项创建一个控制。

Options

选项 类型 默认值 描述 position String 'topright' 控制初始的位置（在地图的某一角）。参见control
positions.

Methods

方法 返回值 描述 setPosition(
<String> position ) this 设置控制的位置。参见control
positions. getPosition() String 返回控制的当前位置。addTo(
<Map> map ) this 将控制添加到地图上。removeFrom(
<Map> map ) this 将控制从地图上移除。 getContainer()HTMLElement 返回
the HTML container of the control.

Control Positions（控制的位置）

Control positions (map corner to put a control to) are set using strings. Margins between controls and the map border are set with CSS, so that you can easily override them.

Position 描述 'topleft' 地图的左上角。 'topright' 地图的右上角。'bottomleft' 地图的左下角。 'bottomright' 地图的右下角。

下面讲下如何创建一个自定义控件

基本模板：

L.Control.XXX= L.Control.extend({
  //在此定义参数	
  options: {
  },
  //在此初始化
  initialize: function (options) {
    L.Util.extend(this.options, options);
  },
  onAdd: function (map) {
     //可在此添加控件内容
  }
});

以此模板创建一个简单图例控件

L.Control.Legend = L.Control.extend({
  options: {
    position: 'topright' //初始位置

  },
  initialize: function (options) {
    L.Util.extend(this.options, options);

  },
  onAdd: function (map) {
     //创建一个class为leaflet-control-clegend的div
    this._container = L.DomUtil.create('div', 'leaflet-control-clegend');
     //创建一个图片要素
    var legendimg = document.createElement('img');
    legendimg.id = 'leaflet-control-clegend';
    legendimg.type = 'img';
    legendimg.src = "../../Content/legend.png";
    this._legendimg = legendimg;
    //创建一个关闭控件的按钮
    var closebutton = document.createElement('a');
    closebutton.id = 'leaflet-control-geosearch-close';
    closebutton.className = 'glyphicon glyphicon-remove';
    this._closebutton = closebutton;
    
    this._container.appendChild(this._closebutton);
    this._container.appendChild(this._legendimg);
    //注册关闭事件
    L.DomEvent.addListener(this._closebutton, 'click', this._onCloseControl, this);
    
    return this._container;
  },
  _onCloseControl: function () {
    this._map.options.Legend = false;
    this.removeFrom(this._map);

  },
});

在定义一些样式后效果如下