Mapbox GL JS：无法加载外部 JSON 文件

Question

我尝试为我的地图创建一个简单的函数 (onclick)。我只是想跟随 This Mapbox tutorial on adding live data（json 点），但我无法让它与我的地图一起使用。目前，这是我尝试做的唯一步骤。

我编写了一个函数，它在单击后正确启动（已通过警报弹出窗口验证），但该函数没有执行任何其他操作，就好像它是空的一样。我使用的是 Firefox，我知道它会显示数据（chrome 而 edge 不会）。我确定我在尝试将代码放入函数时以某种方式弄乱了代码。下面是我为名为 addMDA_toA 的函数开始的代码，我的地图名为 topleftmapbox :

function addMDA_toA()
{ 

alert("Function has started.");  // verifies the function started by an alert. This works.


var url = 'https://wanderdrone.appspot.com/';
topleftmapbox.on('load', function () {
    window.setInterval(function() {
        topleftmapbox.getSource('drone').setData(url);
    }, 2000);

    topleftmapbox.addSource('drone', { type: 'geojson', data: url });
    topleftmapbox.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
            "icon-image": "rocket-15"
        }
    });
});

}

总的来说，我对 JS 和 Mapbox 还是个新手，所以我认为不需要 onload() 函数，因为我是通过外部点击调用该函数的。因此，据我所知，我删除了它（以及相关的括号），因为我正在学习 - 导致下面的代码仍然不执行任何操作。同样，我想要做的就是让 Mapbox 示例 that I previously linked to 按原样在我自己的地图上工作，使用我自己的函数，以便我可以在需要时调用它。下面是第二次尝试也没有用。我究竟做错了什么？我不觉得我在改变什么。

function addMDA_toA(){


alert("Function has started.");




var url = 'https://wanderdrone.appspot.com/';

    window.setInterval(function() {
        topleftmapbox.getSource('drone').setData(url);
    }, 2000);

    topleftmapbox.addSource('drone', { type: 'geojson', data: url });
    topleftmapbox.addLayer({
        "id": "drone",
        "type": "symbol",
        "source": "drone",
        "layout": {
            "icon-image": "rocket-15"
        }
    });



}

Answer 1

上面的第二个代码块正确，事实上。这是一个如何加载外部 geoJSON 文件的好例子。在我重新输入函数和执行它的代码后，问题就解决了。我看了一遍，没有任何问题。真正的问题是混乱的代码，所以如果有人看到这个，我想提醒你保持代码的整洁和可读性，因为它可能会混淆其他人，也会混淆你自己。

Mapbox GL JS：无法加载外部 JSON 文件

Mapbox GL JS : Unable to load external JSON file

javascript

geojson

mapbox-gl-js