单击图层时如何获取featureGroup的名称/ ID

时间:2016-11-30 09:10:45

标签: javascript leaflet

我正在使用Leaflet,我创建了一个地图,其中我在一个featureGroup中放置了一些圆形标记,在其他featureGroup中放置了多边形。

圆圈标记是可点击的点,一旦点击,就会从地图中移除图层并将正确的多边形featureGroup添加到地图中。现在我正在删除带有圆圈的featureGroup。

是否可以获取父featureGroups'单击其中一个圆圈标记时,名称 ID

由于我在可点击的圈子中添加了更多功能组,我希望通过点击的圈子内容功能组从地图中动态删除featureGroup,而不是直接引用它。

1 个答案:

答案 0 :(得分:3)

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