2015-03-02 98 views
5

使用繪圖工具在自定義地圖上繪製其中一個形狀後,使用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); 
    });  
}); 

無的,這似乎是工作。我可以使用工具箱刪除圖層,但是我不會以我希望提交的表單提交任何信息。

如何刪除在按下表單上的取消按鈕時繪製的對象?

回答

6

由於您正在添加到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); 
});  
+1

海量豎起大拇指。該問題的課,我只是簡單地添加一個ID,取消按鈕和它的工作。您的活生生的例子就是幫我弄清楚的事實你提醒我檢查控制檯中是否有任何東西,事實並非如此。謝謝!現場示例是最好的!你可能想要編輯你的答案,以涉及id而不是class :) – 2015-03-03 01:17:33

0

我有同樣的問題。對於我以下解決方案的工作,

featureGroup.clearLayers(e.layer);

希望這會幫助別人