Mapbox gl js 从 firebase 数据库添加一个标记

Question

我想根据我的 firebase 数据库向我的 mapbox 地图添加一些自定义标记，但我不知道如何做。

所以我得到了从我的数据库接收纬度和经度的 gotData 函数

    function gotData(data) {

  console.log(data.val());
  var dados = data.val();
  var keys = Object.keys(dados);
 // console.log(keys);
for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var latitude = dados[k].latitude;
    var longitude = dados[k].longitude;
    //console.log(latitude, longitude);
    var li = createElement('li', latitude + ': ' + longitude);   
}   

}

我已经在我的 HTML 文件中添加了一个添加标记的代码，但我不知道要在 "coordinates" 中放入什么：

mapa.on('load', function () {
mapa.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [What goes here?]
                },
                "properties": {
                    "title": "title",
                    "icon": "circle"
                }
            }]
        }
    },
    "layout": {
        "icon-image": "{icon}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

});

欢迎任何提示

Answer 1

在 GeoJSON (spec here) 中，点的 coordinates 是 [longitude, latitude] 顺序的数组。

所以对于你的代码，你需要类似的东西：

var features = [];
for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var latitude = dados[k].latitude;
    var longitude = dados[k].longitude;
    //console.log(latitude, longitude);
    var li = createElement('li', latitude + ': ' + longitude);   

    features.push({
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [+longitude, +latitude]
        },
        "properties": {
            "title": "title",
            "icon": "circle"
        }
    });

}   


mapa.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": features
        }
    },
    "layout": {
        "icon-image": "{icon}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

Mapbox gl js 从 firebase 数据库添加一个标记

Mapbox gl js Add a Marker from firebase database

javascript

marker

mapbox-gl-js