Leaflet GeoJson addToMap Loader

Posted 2021-04-13

我想为我的英语水平道歉，但我会努力尽力描述我的问题。我在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"); }    
});

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

答案

一种简单的方法是添加您的装载机：

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

另一答案

如果你使用jquery库，我认为尝试使用$ .ajax方法。你可以创建一个加载的函数我正在使用一个gif加载器（true）;和黑色透明的背景。当我必须首先使用我的geojson文件时，我调用loder函数并且我调用$ .ajax方法而不是它将成功我再次调用loader函数但现在我给出一个假参数，所以这个函数显示为tranparent background和loader gif。