在具有递增的变量/对象中存储和控制传单 GeoJSON 图层

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

本文关键字：控制 存储 图层 GeoJSON 对象 变量      更新时间：2023-09-26

在这个问题之后，我尝试使用 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层可由层控制器独立选择。图层控制按钮出现在地图上，但如果我将鼠标悬停在它上面，它会消失并且不显示任何图层，同样，我不知道为什么。

有人知道吗？

多谢

解决方案 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：您忘记使用 addTo L.Control.Layers 方法，该方法实际上添加了控件 map： 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

相关文章：