【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); }, });

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

【Leafletjs】5.L.Control 自定义一个Control,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。