Массива слоев GeoJSON против PanelLayers: Layer неопределенных

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