Prospekt GeoJson addToMap Loader

Question

Ich möchte mich für mein Englischniveau entschuldigen, aber ich werde versuchen, mein Bestes zu geben, um mein Problem zu beschreiben. Ich habe eine kleine Erfahrung in Javascript/HTML/Ajax. Ich habe ein Webgis mit Leaflet erstellt. Mein Code erhält eine Geojson-Datei und wird zur Karte hinzugefügt. Meine Daten haben eine große Menge an Größe, also würde ich gerne einen Loader haben, während der Benutzer auf die Ergebnisse wartet. Das Szenario: Die Presse Benutzer eine Taste und unten ist der Code der Taste:

$("#btnFillData").click(function(){ 
    if (mymap.hasLayer(lyrda)) { 
     mymap.removeLayer(lyrda); 
    } 
    var filePath=folderYears+fileMonths; 
    lyrda = L.geoJSON.ajax(filePath, {style:styleDataColors, onEachFeature:processLyr}).addTo(mymap); 
}); 

ich dies gefunden: How can I create a "Please Wait, Loading..." animation using jQuery?

ich die obige Lösung versucht, aber ich glaube, dass ich nicht tun, was ich muss tun. In der obigen Lösung können wir sehen:

$body = $("body"); 

$(document).on({ 
    ajaxStart: function() { $body.addClass("loading"); }, 
    ajaxStop: function() { $body.removeClass("loading"); }  
}); 

Wo sollte ich diesen Code einfügen? Vielen Dank im Voraus!

Answer 1

Eine einfache Möglichkeit ist Ihr Lader hinzuzufügen:

$body.addClass("loading"); 

Bevor die Daten bekommen und dann nach:

$body.removeClass("loading"); 

Sie können dies versuchen:

$("#btnFillData").click(function(){ 
    if (mymap.hasLayer(lyrda)) { 
     mymap.removeLayer(lyrda); 
    } 
    var filePath=folderYears+fileMonths; 
    $body.addClass("loading"); 
    lyrda = L.geoJSON.ajax(filePath, {style:styleDataColors, onEachFeature:processLyr}).addTo(mymap); 
    $body.removeClass("loading"); 
}); 

Answer 2

Wenn Sie jquery-Bibliothek verwenden, denke ich, versuchen Sie, $ ajax-Methode zu verwenden. Sie können eine Funktion zum Laden für Beispiel erstellen, ich benutze einen GIF Loader (true); und schwarz transparent ein Hintergrund. wenn ich meine Geojson-Datei zuerst verwenden muss, rufe ich lodere Funktion und die i $ ajax-Methode aufrufen und als Erfolg wird, ich rufe wieder loader Funktion, aber jetzt gebe ich einen falschen Parameter, so dass diese Funktion transparent Hintergrund und Loader gif angezeigt.