2016-11-30 91 views
0

我正在玩Leaflet,并创建了一个地图,其中一些circle标记放置在一个featureGroup中,另一个featureGroup中放置多边形。如何在点击图层时获取featureGroup的名称/ ID

圆形标记是可点击的点,其中一旦单击该点,将从地图中移除图层,并将右侧的多边形featureGroup添加到地图中。现在,我将通过名称删除带有圆圈的featureGroup。

是否有可能当你点击圆圈标记之一来获取父featureGroups' 名称ID

由于我添加更多featureGroups与可点击的圈子,我想通过点击的圈子parent featureGroup从地图动态删除featureGroup,而不是直接引用它。

回答

3

宣传单没有“父组”的概念。一个L.Layer可以属于零个,一个或多个L.LayerGroup S,例如: -

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来检查给定图层是否在组中。

如果你不怕单张源代码(并且您已经阅读插件教程和了解了一下内部结构),你也可以猴子补丁此功能,喜欢的东西:

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

谢谢伊万! – Dixos