在传单地图中处理Ajax请求 [英] Handling ajax-request in leaflet map

问题描述

我有一个非常基本的传单地图，使用leaflet-panel-layers可以创建漂亮的图层控件.我有两个函数来创建图层和叠加层.我的数据在外部geoJSON-Files中，这似乎是我的问题，因为传单没有提供任何获取外部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请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！