GeoJSON图层与PanelLayers的数组：图层未定义

Question

我从运行此代码得到了一系列GeoJSON图层：

var myURL = [ "url1", "url2", "url3" ];

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

    var scenario_json = [];

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

我想将此数组与Leaflet Addon Panel Layers一起使用 。 我想调用数组中存储的每个GeoJSON图层，并将它们添加到面板中的一组图层中。 这是我的代码：

osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
esriLayer = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            maxZoom: 17
        });

var baseLayers = [
    {
        name: "OpenStreetMap",
        layer: osmLayer
    },
    {
        name: "Esri World Imagery", 
        layer: esriLayer
    }
];
var overLayers = [  
    {
        group: "Modelisation results",
        layers: [
                {
                name: "Scenario 1",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[1]
                },
                {
                name: "Scenario 2",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[2]
                },
                {
                name: "Scenario 3",
                icon: '<i class="icon icon-modelisation"></i>',
                layer: scenario_json[3]
                }
            ]
    }
];

var panelLayers = new L.Control.PanelLayers(baseLayers, overLayers);
var map = L.map('map').setView([48.42432,-71.16237], 14);   
map.addLayer(osmLayer);
map.addControl(panelLayers);    

如果我放L.tilelayer.WMS变量而不是L.tilelayer.WMS scenario_json[x] ，它可以正常工作，但是我无法使它与数组一起使用，我一直在获取scenario_json is not defined L.tilelayer.WMS 。

有人有解决方案吗？

Answer 1

我建议您将所有映射初始化代码包装到一个函数中，并在收到所有getJSON响应时调用它。 就像是：

    function initMap(scenario_json) {
        osmLayer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
        esriLayer = new L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            maxZoom: 17
        });

    var baseLayers = [
        {
            name: "OpenStreetMap",
            layer: osmLayer
        },
        {
            name: "Esri World Imagery",
            layer: esriLayer
        }
    ];
    var overLayers = [
        {
            group: "Modelisation results",
            layers: [
                {
                    name: "Scenario 1",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[1]
                },
                {
                    name: "Scenario 2",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[2]
                },
                {
                    name: "Scenario 3",
                    icon: '<i class="icon icon-modelisation"></i>',
                    layer: scenario_json[3]
                }
            ]
        }
    ];
}  



var myURL = [ "url1", "url2", "url3" ];
var scenario_json = [];          
for (var i = 0; i < myURL.length; i++) {        
    $.getJSON(myURL[i], function (data) {
        var layer= new L.GeoJSON(data);
        scenario_json.push(layer);
        if(scenario_json.length == myURL.length) {
            initMap(scenario_json);
        }
    }); 
 };

或者，您可以在jQuery.when()方法的帮助下链接您的诺言：

$.when( $.ajax(myURL[1]), $.ajax(myURL[2]), $.ajax(myURL[3]) )
.done(function(first, second, third){
    //collect scenario_json
    //init map
})
.fail(function(){
    //handle the error
});