Mapbox GL 添加 json 作为数据源

Question

我目前正在从事一个涉及 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]
        };
    });
};

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

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

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"
        }
    });
});

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

提前感谢您的帮助！我希望这是可能的。

亲切的问候，

沃特

Answer 1

GeoJSON 在格式化特征时非常敏感。将每个值推送到一个数组可能比使用 "return" 更值得。

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": {
            "type": "FeatureCollection",
            "features": test
        }
    });
    map.addLayer({
        "id": "point",
        "type": "circle",
        "source": "point",
        "paint": {
            "circle-radius": 8,
            "circle-color": "#000"
        }
    });
});

希望对您有所帮助。

Mapbox GL 添加 json 作为数据源

Mapbox GL add json as data source

json

return

geojson

mapbox