Question

地图中显示多个图层，我希望有一个删除按钮，用于从这些图层中删除选定的标记。

我正在使用Leaflet.draw插件来实现它，但似乎绘制控件必须绑定到单个图层，而我有多个图层。

我尝试将图层中的所有要素复制到FeatureGroup并将FeatureGroup与绘图控件绑定以实现此目的，但它打破了图层控件行为，因为我无法再控制图层的可见性。（FeatureGroup中的重复功能）。

有没有办法在不破坏图层可见性控制的情况下启用多层功能删除？

var layerControl = new L.Control.Layers({}, {});

var geojsonLayer = L.geoJson(data);
geojsonLayer.getLayers()[0].addTo(drawnItems);

var geojsonLayer2 = L.geoJson(data2);
geojsonLayer2.getLayers()[0].addTo(drawnItems);

map.addControl(layerControl);
layerControl.addOverlay(geojsonLayer, 'layer1');
layerControl.addOverlay(geojsonLayer2, 'layer2');

Answer 1

我想我仍然需要在FeatureCollection图层中保留标记的副本，并相应地从drawDelete事件中的特定图层中删除它们。当图层可见性从LayerControl更改时，从FeatureCollection图层添加/删除标记。

    // Draw Control
    var editableFeatures = L.featureGroup();
    map.addLayer(editableFeatures);
    var drawControl = new L.Control.Draw({
        draw: false,
        edit: {
            edit: false,
            featureGroup: editableFeatures
        }
    });

    map.on('draw:deleted', function(e) {
        var layers = e.layers;
        layers.eachLayer(function(feature) {
            map.eachLayer(function(mapLayer) {
                if (mapLayer.hasLayer) {
                    mapLayer.removeLayer(feature);
                }
            });
        });
    });

    map.addControl(drawControl);

    //LayerControl
    var layerControl = new L.Control.Layers({}, {});
    map.addControl(layerControl);

    map.on('overlayadd', function(layer, name) {
        layer.layer.eachLayer(function(feature) {
            editableFeatures.addLayer(feature);
        });
    });

    map.on('overlayremove', function(layer, name) {
        layer.layer.eachLayer(function(feature) {
            editableFeatures.removeLayer(layer);
        });
    });

使用Leaflet.draw从多个图层中删除要素

1 个答案: