从 ajax 请求发出 mapbox geojson 数据

Question

我有一张用 mapbox 创建的世界地图。在那张地图上，我想显示我跑步/骑行/远足的路线。这些路线（折线）的数据存储在数据库中。根据用户选择的活动（跑步、骑行、远足......），我调用一个 ajax 请求（php 文件）来为地图提供所需的路线。地图显示正确，但地图上没有显示路线。php 文件返回正确的 json 数据（使用 JSONLint 测试）。现在，如果我复制我的 php 文件返回的数据并在我创建地图的 javascript 中手动复制它，而不是使用我的 ajax 请求，那么所有路线都会正确显示。我无法弄清楚我的 ajax 请求/php 文件有什么问题。

这是我的javascript：

mapboxgl.accessToken = '...';

var map = new mapboxgl.Map({

    container: 'map',

    style: 'mapbox://styles/dudanesk/ck9yhkakw2f3a1imzd1qpbs6a',

    center: [0, 20],

    zoom: 1.25,

});

// Add zoom and rotation controls to the map.

map.addControl(new mapboxgl.NavigationControl());

const queryString = window.location.search;

const urlParams = new URLSearchParams(queryString);

const athleteID = urlParams.get('athleteID');

$.ajax({

    url: "test.php",

    type: "POST",

    proccessData: false,

    dataType: "JSON",

    success: function (json) {

        map.on('load', function(){

            // Add a new source from our GeoJSON data 

            map.addSource('route', {

                type: 'geojson',

            data: json

            });

            // Create layer from source

            map.addLayer({

                'id': 'route',

                'type': 'line',

                'source': 'route',

                'layout': {

                    'line-join': 'round',

                    'line-cap': 'round'

                },

                'paint': {

                    'line-color': 'red',

                    'line-width': 2

                }

            });

        });

    },

    error: function(xhr, status, error){

        var errorMessage = xhr.status + ': ' + xhr.statusText

        alert('Error - ' + errorMessage);

    },

});

谁能看出为什么路线不会出现在我的地图上？我没有任何错误信息。感谢您的时间和帮助

Answer 1

好的，我想我得到了修复。如果我在开始 ajax 查询之前移动map.on('load', function(){，而不是将它放在我的 ajax 成功函数中，那么我的代码似乎可以正常工作：map.on('load', function(){    $.ajax({        url: "test.php",        type: "POST",        proccessData: false,        dataType: "JSON",        success: function (json) {            //alert(JSON.stringify(json));            // Add a new source from our GeoJSON data             map.addSource('route', {                type: 'geojson',                data: json            });            // Create layer from source            map.addLayer({                'id': 'route',                'type': 'line',                'source': 'route',                'layout': {                    'line-join': 'round',                    'line-cap': 'round'                },                'paint': {                    'line-color': 'red',                    'line-width': 2                }            });        },        error: function(xhr, status, error){            var errorMessage = xhr.status + ': ' + xhr.statusText            alert('Error - ' + errorMessage);        },    });});