javascript - 处理传单 map 中的ajax请求

Question

我有一个非常基本的传单 map ，使用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;
}

我的 map 是这样构建的:

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

如果我想直接将图层添加到 map 中，这实际上效果很好。但就我而言，异步请求似乎在我的图层切换器添加到 map 后准备就绪，因此图层不会出现在那里。 有没有什么方法可以简单地解决这个问题而不需要深入回调？

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