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

Question

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

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

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

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