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文件

1 个答案: