处理传单地图中的 ajax-请求

Question

我有一个非常基本的传单地图，使用 leaflet-panel-layers 创建漂亮的图层控件。我有两个函数来创建图层和叠加层。我的数据在外部 geoJSON 文件中，这似乎是我的问题，因为传单没有提供任何获取外部 geoJSON 的信息。我还使用 proj4leaflet 库来使用我的 json 中给出的投影。所以 google 告诉我使用 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);
});

处理传单地图中的 ajax-请求

Handling ajax-request in leaflet map

javascript

ajax

jquery

leaflet