传单 GeoJson addToMap 加载器答案

【问题标题】：Leaflet GeoJson addToMap Loader传单 GeoJson addToMap 加载器
【发布时间】：2017-12-17 14:41:46
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery ajax leaflet loader

【解决方案1】：

一个简单的方法是添加你的加载器：

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

【讨论】：

非常感谢！我相信我继续做错事。现在它没有给出任何错误，我看不到 gif 图像。我相信这与CSS有关。再次感谢！至少我现在没有任何错误！
首先检查是否可以在页面上显示 GIF，这总是一个好方法！

【解决方案2】：

如果您使用的是 jquery 库，我想尝试使用 $.ajax 方法。您可以创建一个用于加载的函数，例如我正在使用 gif loader(true);和黑色透明背景。当我必须首先使用我的 geojson 文件时，我调用 loder 函数并调用 $.ajax 方法，然后它会成功我再次调用加载器函数，但现在我给出了一个错误参数，因此该函数显示为透明背景和加载器 gif。

【讨论】：