【Leafletjs】5.L.Control 自定义一个Control-优快云博客

本文链接：https://blog.youkuaiyun.com/jsrookie/article/details/84814149

本文介绍了如何在Leafletjs中创建自定义的Control，包括使用构造器、配置选项、方法以及不同位置的控制。通过示例展示了创建一个图例控件的过程，包括基本模板和更复杂的扁平样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

    },
});