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

【问题标题】：Mapbox GL JS : Unable to load external JSON fileMapbox GL JS：无法加载外部 JSON 文件
【发布时间】：2018-10-24 09:48:16
【问题描述】：

我正在尝试为我的地图创建一个简单的函数 (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"
        }
    });



}

【问题讨论】：

标签： javascript geojson mapbox-gl-js

【解决方案1】：

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

【讨论】：