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

我不确定这是否可行，所以如果我错了请纠正我。我想我必须在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"
        }
    });
});

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

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

亲切的问候，

的Wouter

Answer 1

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

希望这有帮助。

Mapbox GL将json添加为数据源

1 个答案: