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

【问题标题】：How can I remove the drawing layer in leaflet.draw?如何删除leaflet.draw 中的绘图层？
【发布时间】：2015-03-02 23:55:57
【问题描述】：

在使用绘图工具在自定义地图上绘制其中一个形状后，使用 Leaflet.draw.js 使用 Leaflet.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);
    });     
});

这些似乎都不起作用。我可以使用工具箱来删除图层，但是我不会以我希望提交的形式提交任何信息。

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

【问题讨论】：

标签： javascript leaflet leaflet.draw

【解决方案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);
});

【讨论】：

大量竖起大拇指.. 问题出在课程上，我只是在取消按钮上添加了一个 id，它就起作用了.. 你的活生生的例子帮助我弄清楚了，你提醒我的事实检查控制台中是否有任何内容，但事实并非如此。谢谢！活生生的例子是最好的！您可能想编辑您的答案，以涉及 id 而不是 class :)

【解决方案2】：

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

featureGroup.clearLayers(e.layer);

希望这会对某人有所帮助

【讨论】：

【解决方案3】：

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

【讨论】：

我也同意，只是为了清除以前绘制的项目，使用 clearLayers() 要简单得多。