【Leafletjs】5.L.Control 自定义一个Control

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);

    },
});

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

高级一点可以定义如下扁平样式的：