Mapbox GL添加json作为数据源

我目前正在从事一个涉及Mapbox GL的项目。我从服务器上得到了一个json文件，其中包含很多位置点。此文件具有以下结构：

{"location": {"lat": 50.62914, "lon": 5.61972}}

现在我想把它们放在mapbox的一个图层上。问题是mapbox只支持GeoJSON。因此，我试图通过以下解决方法来解决这个问题

function updateMap(data) {
    console.log("Updating map with " + data.length + " users");
    // Converting my json file into a Geojson format by returning type:point, coordinates for every json entry
    data.forEach(function(d) {
        return {
            "type": "Point",
            "coordinates": [d.location.lon, d.location.lat]
        };
    });
};

我不确定这是否可能，所以如果我错了，请纠正我。我想我必须在forEach循环之外返回它，否则我只能得到第一个结果

下一步是添加此geojson文件作为层的源。看起来像这样的东西：

map.on('load', function () {
    map.addSource('point', {
        "type": "geojson",
        "data": //need to add the points that I returned above here.
    });

    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

map.on('load', function() {
    map.addSource("point", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": test
        }
    });
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

唯一的问题是我不知道如何在updateMap函数中从返回中检索所有数据

提前谢谢你的帮助！我希望这是可能的

亲切问候,

---

Wouter

GeoJSON在格式化功能时非常敏感。与其使用“返回”，不如将每个值推送到一个数组中

function updateMap(data) {
    var test = [];
    data.forEach(function(d) {
        test.push(JSON.parse('{"type": "Feature", "geometry": {"type": "Point", "coordinates": ['+d.location.lon+','+ d.location.lat+']}}'));
    });
}

然后将map.addSource更改为如下所示：

map.on('load', function () {
    map.addSource('point', {
        "type": "geojson",
        "data": //need to add the points that I returned above here.
    });

    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

map.on('load', function() {
    map.addSource("point", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": test
        }
    });
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

---

希望这能有所帮助。

GeoJSON在格式化功能时非常敏感。与其使用“返回”，不如将每个值推送到一个数组中

function updateMap(data) {
    var test = [];
    data.forEach(function(d) {
        test.push(JSON.parse('{"type": "Feature", "geometry": {"type": "Point", "coordinates": ['+d.location.lon+','+ d.location.lat+']}}'));
    });
}

然后将map.addSource更改为如下所示：

map.on('load', function () {
    map.addSource('point', {
        "type": "geojson",
        "data": //need to add the points that I returned above here.
    });

    map.addLayer({
        "id": "point",
        "source": "point",
        "type": "circle",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

map.on('load', function() {
    map.addSource("point", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": test
        }
    });
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

---

希望这有帮助。

是的，谢谢。这是正确的答案。但它已经起作用了。仍然开始越来越讨厌地图盒。完全理解。我们似乎有很多问题，图标没有100%的时间加载。让我发疯的是，我无法根据json文件中的值编辑圆圈的颜色，因为我必须将其转换为geojson。我失去了两个值之间的联系。不得不手动将我的json文件切碎，并在地图上添加4层。是的，谢谢。这是正确的答案。但它已经起作用了。仍然开始越来越讨厌地图盒。完全理解。我们似乎有很多问题，图标没有100%的时间加载。让我发疯的是，我无法根据json文件中的值编辑圆圈的颜色，因为我必须将其转换为geojson。我失去了两个值之间的联系。不得不手动将我的json文件切碎，并在地图上添加4层。