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

        },

    });

});