GeoJSON 图层数组与面板图层:图层未定义

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

我想将此数组与传单插件面板图层一起使用。我想调用数组中存储的每个 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变量而不是scenario_json[x]，它工作正常，但我无法让它与数组一起使用，我一直得到scenario_json is not defined.

有人有解决方案吗？

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