如何删除leaflet.draw中的绘图层？

Question

使用 leaflet.js 使用 leaflet.draw.js 在使用绘图工具在自定义地图上绘制其中一个形状之后。我有一个弹出的表格，上面写着保存或取消。如果用户按下取消，那么我希望删除绘图。例如我画了一个矩形。

这是我当前的来源

map.on('draw:created', function(e) {
    var layer = e.layer;
    var type = e.layerType;

    $("#add-drawing").fadeIn(500);

    featureGroup.addLayer(e.layer); // Adds rectangle

    $("a.cancelD").on("click", function() {
        $("#add-drawing").fadeOut(500);

        // THESE ARE THE METHODS I HAVE TRIED TO REMOVE THE RECTANGLE
        map.removeLayer(layer);
        featureGroup.removeLayer(layer);
        map.removeLayer(e);
        featureGroup.removeLayer(e);
    });     
});

None 这似乎有效。我可以使用工具箱删除图层，但是我不会在我希望提交的表单中提交任何信息。

如何在按下表单上的取消按钮时删除我绘制的对象？

Answer 1

既然你要添加到 featureGroup，你说有效，你也应该从 featureGroup 中删除。调用 featureGroup.removeLayer(e.layer) 或 featureGroup.removeLayer(layer)（因为 layer 持有对 e.layer 的引用）应该有效。

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/kPvYbH?p=preview

在我看来，唯一的结论可能是您的事件没有触发，或者您遇到了某种奇怪的范围问题，但这很容易调试：

$("a.cancelD").on("click", function() {
    console.log('Click fired!'); // Seeing this in your console, event works
    console.log(featureGroup); // Should return featureGroup instance, scope ok
    console.log(e.layer); // Should return polygon instance, scope ok

    // If all of the above works, this should too
    featureGroup.removeLayer(e.layer);
});

Answer 2

我遇到了同样的问题。对我来说，以下解决方案有效，

featureGroup.clearLayers(e.layer);

希望这对某人有所帮助

Answer 3

或者，您可以简单地在您创建的 featureGroup 图层上调用 .clearLayers() 来保存所有绘图。

如何删除leaflet.draw中的绘图层？

How can I remove the drawing layer in leaflet.draw?

javascript

leaflet

leaflet.draw