javascript - 单击图层时如何获取要素组的名称/ID

Question

我正在使用 Leaflet，并且创建了一张 map ，其中在一个要素组中放置了一些圆形标记，在其他要素组中放置了多边形。

圆形标记是可单击的点，单击后将从 map 中删除图层并将正确的多边形要素组添加到 map 中。现在我正在删除名称带有圆圈的 featureGroup。

当您点击其中一个圆形标记时，是否可以获取父要素组的名称或ID？

当我添加更多带有可点击圆圈的要素组时，我想通过点击的圆圈父要素组从 map 中动态删除要素组，而不是直接引用它。

Answer 1

否。

Leaflet 没有“父组”的概念。一个L.Layer可以属于零个、一个或多个L.LayerGroup，例如:

var kyiv = [50.5, 30.5],
    lnd = [51.51, -0.12],
    sf = [37.77, -122.42],
    dc = [38.91, -77.04],
    trd = [63.41, 10.41],
    mad = [40.40, -3.7];

var markerKyiv = L.marker(kyiv).addTo(all),
    markerLnd  = L.marker(lnd).addTo(all),
    markerDC   = L.marker(dc).addTo(all),
    markerSF   = L.marker(sf).addTo(all),
    markerTrd  = L.marker(trd).addTo(all),
    markerMad  = L.marker(mad).addTo(all);

var euro = L.featureGroup([markerTrd, markerMad, markerKyiv, markerLnd]).addTo(map);
var usa  = L.featureGroup([markerDC, markerSF]).addTo(map);
var northern  = L.featureGroup([markerTrd, markerKyiv, markerLnd]).addTo(map);
var southern  = L.featureGroup([markerDC, markerSF, markerMad]).addTo(map);

L.control.layers({},{
  Euro: euro,
  USA: usa,
  Northern: northern,
  Southern: southern
},{
  collapsed:false
}).addTo(map);

将其视为一个工作示例 over here .

您可能想使用hasLayer method不过，检查给定图层是否在一个组中。

如果您不害怕 Leaflet 源代码(并且您已经阅读了插件教程并对内部架构有所了解)，您还可以使用猴子修补此功能，例如:

L.LayerGroup.include({
    addLayer: function (layer) {
        var id = this.getLayerId(layer);
        this._layers[id] = layer;
        if (this._map) {
            this._map.addLayer(layer);
        }

        // Add this group to the layer's known groups
        layer._groups.push(this);

        return this;
    },

    removeLayer: function (layer) {
        var id = layer in this._layers ? layer : this.getLayerId(layer);
        if (this._map && this._layers[id]) {
            this._map.removeLayer(this._layers[id]);
        }
        delete this._layers[id];

        // Remove this group from the layer's known groups
        layer._groups.splice(layer._groups.indexOf(this), 1);

        return this;
    }
});

// Make sure to init a property in L.Layer
L.Layer.addInitHook(function(){
    this._groups = [];
});

// Add a public getter for the layer's groups
L.Layer.include({
    getGroups: function() {
        return this._groups;
    }
});