使用 Javascript 循环将 Leaflet GeoJSON 图层从 GeoServer 添加到数组

Question

我正在尝试使用循环将 GeoJSON 层添加到数组，然后在我的地图上显示它们。

我的目标是拥有这样的变量：scenario_json[1] = layer1，scenario_json[2] = layer2，等等...

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


$.getScript('src/leaflet.js');

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

    var scenario_json = {};
    scenario_json[i] = new L.GeoJSON();

    function getJson(data){
        console.log(data)
        scenario_json[i].addData(data); 
    }

    $.ajax({
        url: myURL[i],
        jsonp: false,
        dataType: "json",
        jsonpCallback: "getJson",
        success: getJson
    })
};

我在我的控制台中收到此响应：

Object {readyState: 1}
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 386, features: Array[386], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefinedgetJson @ VM3689:11c @ jquery.min.js:3p.fireWith @ jquery.min.js:3k @ jquery.min.js:5r @ jquery.min.js:5
VM3689:10 Object {type: "FeatureCollection", totalFeatures: 377, features: Array[377], crs: Object}
VM3689:11 Uncaught TypeError: Cannot read property 'addData' of undefined

知道为什么它不起作用吗？

谢谢

Answer 1

发生的事情是 scenario_json 在 getJson 回调的上下文中不存在。

我不确定您为什么要使用 JSONP，因为它是发出跨域请求的旧解决方法。您不需要它，因为您目前正在 localhost/same 域中工作。您可以尝试将纯 XHR 与 JSON 一起使用，而不是 JSONP。

从您的 URL 中移除 formatOptions：

myURL = [
    "http://localhost:8080/geoserver/jonquiere_local/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=jonquiere_local:buildings_phase1&maxFeatures=400&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:buildings_phase3&maxFeatures=400&outputFormat=json"
];

切换到 $.getJSON:

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

    var scenario_json = {};

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

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/fNf9CDTBCCsj3cavVjJY?p=preview

PS。如果你曾经运行遇到跨域问题，你可以通过在 GeoServer 上启用 CORS 来简单地解决它。

使用 Javascript 循环将 Leaflet GeoJSON 图层从 GeoServer 添加到数组

Add Leaflet GeoJSON layers from GeoServer to an Array using a Javascript loop

javascript

arrays

jquery

leaflet