如何在mapbox gl中显示firebase后端数据

Question

如何将firebase数据导入gl系统以显示在html文件中？

我在这个例子中工作：https://www.mapbox.com/mapbox-gl-js/example/heatmap/。我不知道要为map.addSource和数据添加什么。谢谢你的建议。

以下是我想要适应gl的传单html文件的一些代码：

// Initialize Firebase
var config = {
apiKey: [key],
authDomain: "[domain name]",
databaseURL: "[url]",
storageBucket: "bitebytes-4d211.appspot.com",
messagingSenderId: "[id]"
};
firebase.initializeApp(config);

defaultDatabase = firebase.database();
var openedOnce = false
firebase.auth().onAuthStateChanged(function(user) {
if (user && !openedOnce) {
openedOnce = true
var isAnonymous = user.isAnonymous;
var uid = user.uid;
var reportsRef = firebase.database().ref('reports/');
reportsRef.on('child_added', function(data) {
console.log('reports child_added');
addPoint(data.val());
});
}
});

Answer 1

您的数据需要来自firebase的有效GeoJSON格式，然后添加此json就像使用mapbox示例添加任何其他geojson源一样。有很多方法可以构建您的firebase数据，以便详细介绍。