2015-03-02 12 views
5

Z plikiem leaflet.js używającym pliku leaflet.draw.js po użyciu narzędzia rysowania w celu narysowania jednego z kształtów na niestandardowej mapie. Mam wyskakujący formularz, który mówi: zapisz lub anuluj. Jeśli użytkownik naciśnie przycisk Anuluj, wówczas chcę, aby rysunek został usunięty. Na przykład rysowałem prostokąt.Jak mogę usunąć warstwę rysunku w pliku leaflet.draw?

Oto mój obecny źródło

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

Żaden z tym wydaje się działać. Mogę użyć przybornika do usunięcia warstwy, ale wtedy nie będę miał żadnych informacji przesłanych w formularzu, który chcę przesłać.

Jak mogę usunąć obiekty, które narysowałem, naciskając przycisk anulowania na formularzu?

Odpowiedz

6

Ponieważ dodajesz do featureGroup, które, jak mówisz, działa, powinieneś usunąć także z featureGroup. Dzwonienie pod numer featureGroup.removeLayer(e.layer) lub featureGroup.removeLayer(layer) (ponieważ layer zawiera odwołanie do e.layer) powinno działać.

Oto przykład pracuje nad Plunker: http://plnkr.co/edit/kPvYbH?p=preview

Moim zdaniem jedyny wniosek, może być, że to wydarzenie nie jest wypalanie lub masz jakieś dziwne kwestii określania zakresu, ale które mogą być łatwo debugowany:

$("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

masywny kciuki .. Problem został klasę, po prostu dodaje identyfikator do przycisku Anuluj i to działało .. Twój żywo przykładem jest to, co pomogło mi zrozumieć to i fakt, przypomniałeś mi, żeby sprawdzić, czy coś jest w konsoli, a nie było. Dziękuję Ci! Przykłady na żywo są najlepsze! Możesz edytować swoją odpowiedź, aby włączyć identyfikator zamiast zajęć :) –

0

Miałem ten sam problem. Dla mnie następujące działanie zadziałało,

featureGroup.clearLayers (e.layer);

nadzieję, że pomoże komuś

Powiązane problemy