查明是否已将传单控件添加到地图中 [英] Find out if a leaflet control has already been added to the map

问题描述

我写了一个自定义的Leaflet控件.这可能是为每个图层添加的图例.控件本身具有一个关闭按钮，可将其从地图中删除(如弹出窗口).可以通过单击按钮添加控件.我的问题是用户可能多次向地图添加相同的控件.因此，我需要测试此特定控件是否已添加到地图中，如果已添加，请不要再次添加.

I wrote a custom Leaflet control. It's some kind of legend that may be added for each layer. The control itself has a close button to remove it from the map (like a popup). The control can be added by clicking a button. My problem is that the user may add the same control to the map several times. So what I need is to test if this specific control has already been added to the map and, if so, don't add it again.

我为每个图层创建一个控件，并传递一些选项

I create a control for each layer, passing some options

var control = L.control.customControl(mylayer);

并点击按钮将其添加到我的地图

and add it to my map on button click

control.addTo(map);

现在想象该控件有一个关闭按钮，并且可能已关闭.现在，如果用户再次单击按钮，我只想添加控件，如果它不在地图上 - 像这样(hasControl 是伪代码，没有这样的功能)

Now imagine the control has a close button and may be closed. Now if the user clicks the button again, I only want to add the control if it's not already on the map - something like this (hasControl is pseudocode, there is afaik no such function)

if(!(map.hasControl(control))) {
    control.addTo(map);
}

为简单起见，我举了一个创建缩放控件并将其添加两次的示例.此处.

For simplicity I made an example where I create a zoom control and add it twice here.

推荐答案

最简单的方法是检查控件实例上是否存在 _map 属性:

Easiest way is to check for the existence of the _map property on your control instance:

var customControl = new L.Control.Custom();

console.log(customControl._map); // undefined

map.addControl(customControl);

console.log(customControl._map); // returns map instance

但是请记住，在使用 _map 属性时，该属性的 _ 前缀意味着它是一个私有属性，通常不应该这样做用.在以后的Leaflet版本中可以更改或删除它.如果使用以下方法，您将不会遇到这种情况:

But please keep in mind, when using the _map property, that the _ prefix of the property implies that it's a private property, which you are normally not supposed to use. It could be changed or removed in future versions of Leaflet. You're not going to encounter that if you use the follow approach:

将自定义控件的引用附加到 L.Map 实例:

Attaching a reference of your custom control to your L.Map instance:

L.Control.Custom = L.Control.extend({
    options: {
        position: 'bottomleft'
    },
    onAdd: function (map) {
        // Add reference to map
        map.customControl = this;
        return L.DomUtil.create('div', 'my-custom-control');
    },
    onRemove: function (map) {
        // Remove reference from map
        delete map.customControl;
    }
});

现在您可以像这样检查地图实例上的参考:

Now you can check for the reference on your map instance like so:

if (map.customControl) { ... }

或创建一个方法并将其包含在 L.Map 中:

Or create a method and include it in L.Map:

L.Map.include({
    hasCustomControl: function () {
        return (this.customControl) ? true : false;
    }
});

那样工作:

var customControl = new L.Control.Custom();

map.addControl(customControl);

map.hasCustomControl(); // returns true

map.removeControl(customControl);

map.hasCustomControl(); // returns false

这是有关Plunker的概念的演示: http://plnkr.co/edit/nH8pZzkB1TzuTk1rnrF0?p=preview

Here's a demo of the concept on Plunker: http://plnkr.co/edit/nH8pZzkB1TzuTk1rnrF0?p=preview

这篇关于查明是否已将传单控件添加到地图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！