从GeoServer的添加单张以GeoJSON图层使用JavaScript循环数组 [英] Add Leaflet GeoJSON layers from GeoServer to an Array using a Javascript loop

问题描述

我想使用循环以GeoJSON图层添加到一个数组，然后向他们展示我的地图。

I'm trying to add GeoJSON layers to an array using a loop, and then showing them on my map.

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

My goal is to have a variable like this: scenario_json[1] = layer1, scenario_json[2] = layer2, etc...

    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
    })
};

我得到在我的控制台这样的响应：

I am getting this response in my console:

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

任何想法，为什么它不工作？

Any idea why it doesn't work ?

感谢

推荐答案

这是怎么回事的是， scenario_json 不在的的上下文中的getJSON 回调。

What's happening is that scenario_json doesn't exist in the context of the getJson callback.

我不能确定，为什么你使用JSONP，因为它是一个古老的解决方法做跨域请求。你不需要说因为你从本地主机/同一个域目前的工作。你可以尝试只使用纯XHR使用JSON而不是JSONP。

I'm unsure as to why you're using JSONP since it's an old workaround for making crossdomain requests. You don't need that since you're working from localhost/same domain at the moment. You could try to just use plain XHR with JSON instead of JSONP.

删除 formatOptions 从你的URL：

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

Here's a working example on Plunker: http://plnkr.co/edit/fNf9CDTBCCsj3cavVjJY?p=preview

PS。如果你遇到问题的跨域你可以在你的GeoServer使CORS简单的解决这个问题。

PS. If you ever run into crossdomain issues you can simple solve it by enabling CORS on your GeoServer.

这篇关于从GeoServer的添加单张以GeoJSON图层使用JavaScript循环数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！