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

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

我的目标是拥有一个像这样的变量：场景 json[1] = 第 1 层，场景 json[2] = 第 2 层，等等......

    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

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

Thanks

发生的事情是这样的scenario_json不存在于上下文中getJson打回来。

我不确定您为什么使用 JSONP，因为它是发出跨域请求的旧解决方法。您不需要它，因为您目前正在本地主机/同一域中工作。您可以尝试仅使用纯 XHR 和 JSON 而不是 JSONP。

去除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 http://plnkr.co/edit/fNf9CDTBCCsj3cavVjJY?p=preview

附言。如果您遇到跨域问题，您可以通过在 GeoServer 上启用 CORS 来简单解决。