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 变量而不是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
});