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);
},
});
在定义一些样式后效果如下