处理传单地图中的ajax请求

Handling ajax-request in leaflet map

本文关键字：ajax 请求 地图 单地图 处理      更新时间：2023-09-26

我有一个非常基本的传单地图使用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);

如果我想直接将图层添加到地图上，这实际上工作得很好。但在我的情况下，异步请求似乎已经准备好后，我的图层切换器被添加到我的地图，所以层不出现在那里。有没有一种方法可以简单地解决这个问题，而不需要使用回调?

在请求完成后添加控件。这可以通过一个回调函数来完成:

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);
});
相关文章：