Leaflet自定義一個Control(L.Control)

原創

顽劣的石头

2020-02-21 12:28

本文轉載出處：【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);

    },
});