處理小冊子地圖中的阿賈克斯請求

Question

我有一個非常基本的小冊子地圖，使用leaflet-panel-layers創建漂亮的圖層控件。我有兩個功能來創建我的圖層和覆蓋。我的數據是在外部geoJSON-文件什麼似乎是我的問題，因爲傳單不提供任何東西來獲得外部geoJSON。我也使用proj4leaflet庫來使用我的json中給出的投影。 因此谷歌告訴我使用關於哪個我不知道任何東西的ajax。我複製粘貼這樣的事情：

function getOverlays(){ 
    var url = 'myServerUrl'; 
    overlays = []; 

    $.ajax({ 
     url: url, 
     dataType: 'jsonp', 
     jsonpCallback: 'getJson', 
     success: function(response) { 
      overlays.push({ 
       name: "Something", 
       layer: L.Proj.geoJson(response, { 
       ... 
       } 
      }); 
     } 
    }); 
    return overlays; 
} 

我的地圖是建立這樣的：

var map = L.map('map', { 
    layers: layers[0].layer 
}); 
var layers = getBaseLayers(); 
var overlays = getOverlays(); 
var panelLayers = new L.Control.PanelLayers(layers,overlays); 
map.addControl(panelLayers); 

如果我想層直接添加到地圖這實際上工作得很好。但在我的情況下，異步請求似乎已準備好我的圖層切換器添加到我的地圖，所以圖層不會出現在那裏。 有沒有什麼辦法可以解決這個問題，而不會潛入回調？

Answer 1

請求完成後添加您的控件。這可以使用回調函數來完成：

function getOverlays(callback){ 
    var url = 'myServerUrl'; 
    overlays = []; 

    $.ajax({ 
     url: url, 
     dataType: 'jsonp', 
     jsonpCallback: 'getJson', 
     success: function(response) { 
      overlays.push({ 
       name: "Something", 
       layer: L.Proj.geoJson(response, { 
       ... 
       } 
      }); 
      callback(overlays) 
     } 
    }); 
    return overlays; 
} 

var map = L.map('map', { 
    layers: layers[0].layer 
}); 
var layers = getBaseLayers(); 
getOverlays(function(overlays){ 
    var panelLayers = new L.Control.PanelLayers(layers,overlays); 
    map.addControl(panelLayers); 
}); 

function getOverlays(callback){ 
    var url = 'myServerUrl'; 
    overlays = []; 

    $.ajax({ 
     url: url, 
     dataType: 'jsonp', 
     jsonpCallback: 'getJson', 
     success: function(response) { 
      overlays.push({ 
       name: "Something", 
       layer: L.Proj.geoJson(response, { 
       ... 
       } 
      }); 
      callback(overlays) 
     } 
    }); 
    return overlays; 
} 

var map = L.map('map', { 
    layers: layers[0].layer 
}); 
var layers = getBaseLayers(); 
getOverlays(function(overlays){ 
    var panelLayers = new L.Control.PanelLayers(layers,overlays); 
    map.addControl(panelLayers); 
});