Leaflet GeoJson addToMap Loader

Question

我想为我的英语水平道歉，但我会尽力描述我的问题。我在javascript / html / ajax 中略有经验。我用 Leaflet 创建了一个 webgis。我的代码获取一个 geojson 文件并添加到地图中。我的数据量很大，所以我想在用户等待结果时有一个加载器。场景：用户按下一个按钮，下面是按钮的代码：

$("#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);
});

我发现了这个： How can I create a "Please Wait, Loading..." animation using jQuery?

我尝试了上述解决方案，但我认为我没有做我必须做的事情。在上面的解决方案中我们可以看到：

$body = $("body");

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

我应该在哪里粘贴这段代码？提前致谢！

Answer 1

如果您正在使用 jquery 库，我想尝试使用 $.ajax 方法。您可以创建一个用于加载的函数，例如我正在使用 gif 加载器（真）；和黑色透明背景。当我必须首先使用我的 geojson 文件时，我调用 loder 函数，然后我调用 $.ajax 方法，然后它会成功，我再次调用加载器函数，但现在我给了一个错误的参数，所以这个函数显示到透明背景和装载机.gif

Answer 2

一种简单的方法是添加加载程序：

$body.addClass("loading");

获取数据之前和之后:

$body.removeClass("loading");

你可以试试这个:

$("#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");
});

Leaflet GeoJson addToMap Loader

Leaflet GeoJson addToMap Loader

javascript

ajax

jquery

loader

leaflet