問題描述

我有一個非常基本的傳單地圖，使用 leaflet-panel-layers 創建漂亮的圖層控件.我有兩個函數來創建我的圖層和疊加層.我的數據在外部 geoJSON 文件中，這似乎是我的問題，因為傳單沒有提供任何東西來獲取外部 geoJSON.我還使用 proj4leaflet 庫來使用我的 json 中給出的投影.所以谷歌告訴我使用ajax，不幸的是我對此一無所知.我復制粘貼了這樣的內容:

I have a very basic leaflet map using leaflet-panel-layers to create a pretty layer control. I have two functions to create my layers and overlays. My data is in external geoJSON-Files what seems to be my problem as leaflet does not offer anything to get an external geoJSON. I also use proj4leaflet library to use the projection given in my json. So google told me to use ajax about which I unfortunately don't know anything. I copy-pasted something like this:

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

我的地圖是這樣構建的:

my map is built like this:

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

如果我想直接將圖層添加到地圖中，這實際上可以正常工作.但在我的情況下，異步請求似乎已準備好在我的圖層切換器被添加到我的地圖中，因此圖層不會出現在那里.有什么方法可以在不深入回調的情況下簡單地解決這個問題?

This actually works fine if I want to add the layers to the map directly. But in my case the asynchronous request seems to be ready after my layer switcher is added to my map so the layers don't appear there. Is there any way to solve this simply without diving into callbacks?

推薦答案

請求完成后添加控件.這可以通過回調函數來完成:

Add your control after request has finished. This can be done with a callback function:

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 請求的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！