以 variable/object 递增的方式存储和控制 Leaflet GeoJSON 层

Question

在之后，我尝试使用 javascript 循环将 geoJson 图层存储在一个变量中，然后通过图层控制面板在我的地图上使用它们。这是我的代码：

myURL = [
    "http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&outputFormat=json",
    "http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase2&maxFeatures=400&outputFormat=json",
    "http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:scenario1&maxFeatures=400&outputFormat=json"
];

lc = new L.control.layers();    

for (i = 0; i < myURL.length; i++) {

    var scenario_json = {};

    $.getJSON(myURL[i], function (data) {
        scenario_json[i++] = new L.GeoJSON(data).addTo(map);
    }).done(function () {
        console.log('$.getJSON Done!');
    }).fail(function () {
        console.log('$.getJSON Fail!');
    });

    lc.addOverlay(scenario_json, "Layer " + i);

};

lc.addTo(map);

（问题 #1）：结果 scenario_json 变量递增是不正确的。 GeoJSON 图层存储在 scenario_json[3]、scenario_json[4] 和 scenario_json[5] 中，我不知道为什么。

（问题 #2）：我正在尝试让图层控制器独立选择 3 个图层。图层控制按钮出现在地图上，但是如果我将鼠标悬停在它上面，它就会消失并且没有图层显示，同样，我不知道为什么。

有人知道吗？

非常感谢

Answer 1

解决方案 1：（几乎）立即触发所有三个请求。到第一个请求实际解决时，i 变量保存迭代的最后一个值：3。解决方案，不要使用对象，而是使用数组，它会为您处理计数。

for (var i = 0; i < myURL.length; i++) {

    var scenario_json = [];

    $.getJSON(myURL[i], function (data) {
        scenario_json.push(new L.GeoJSON(data).addTo(map));
    });

};

问题 2：您忘记使用 L.Control.Layers 的 addTo 方法，该方法实际上将控件添加到地图：new L.Control.Layers().addTo(map);

此外，您需要在 $.getJSON 的回调中调用 addOverlay，因此它会在层准备好后立即执行，现在它会在您的请求得到解决之前立即调用：

var lc = new L.Control.Layers().addTo(map);

for (var i = 0; i < myURL.length; i++) {

    var scenario_json = [];

    $.getJSON(myURL[i], function (data) {

        var layer = new L.GeoJSON(data).addTo(map);
        scenario_json.push(layer);
        lc.addOverlay(layer, 'Layer ' + scenario_json.length);

    });

};

关于 Plunker 的完整解决方案：http://plnkr.co/edit/M1CxWoyHUjc85zRpmtsS?p=preview

旁注。使用 var 关键字声明变量被认为是最佳实践。目前您没有为 myURL、lc 和 i

这样做

以 variable/object 递增的方式存储和控制 Leaflet GeoJSON 层

Stock and control Leaflet GeoJSON layers in a variable/object with incrementation

javascript

jquery

openlayers

leaflet