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

Question

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