Leaflet GeoJson addToMap Loader

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Leaflet GeoJson addToMap Loader相关的知识,希望对你有一定的参考价值。

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

以上是关于Leaflet GeoJson addToMap Loader的主要内容,如果未能解决你的问题,请参考以下文章

GeoJson 造型 Asymmetrik/ngx-leaflet

从外部访问 Leaflet.js GeoJson 功能

在 Leaflet.js 地图周围包裹 GeoJSON 对象

Leaflet.js - 在地图视图上拟合 geoJSON 坐标

如何使用 react-leaflet 从 geojson 数据创建图例

leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)