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

问题描述：

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

这里是我的电流源

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

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

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

答

由于您正在添加到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 :) – 2015-03-03 01:17:33

答

我有同样的问题。对于我以下解决方案的工作，

featureGroup.clearLayers（e.layer）;

希望这会帮助别人

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

相关推荐