使用下面的代码(从 API 生成事件数据),我想创建一个 map 框图层,然后可以使用它在 map 上创建标记和符号。不过,我不想使用 Mapbox 标记,因为这会导致我的代码出现问题,而且我不想使用它。
我已经成功地对硬编码数据实现了这一点,并且我想对从 API 接收的数据执行同样的操作。我尝试将生成的数据转换为 GeoJSON 并尝试循环数据(这会导致创建多个 id 并破坏代码)
callbackEventbrite(function(result){
console.log("env", result)
//var geo = GeoJSON.parse(result.events,{Point: [result.location.latitude, result.location.longitude]});
//console.log(geo);
const keys = Object.values(result);
for(const key of keys){
geojson = {
type: 'featureCollection',
features: [{
type: 'feature',
geometry: {
type: 'Point',
coordinates: [key.venue.longitude, key.venue.latitude]
}
}]
}
eventInfo.push(
{"longitude": key.venue.longitude , "latitude": key.venue.latitude , "name": key.name.text, "venue": key.venue.name, "date": key.start.local, "category": key.category_id}
);
}
});
function callbackEventbrite(callback){
$.ajax(briteSettings).done(function(data){
callback(data.events);
});
}
// What Iv'e got to work (hard coded data)
map.on("load", function(){
map.addLayer({
"id": "locations",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Title": "The Congress Inn",
"Description": "Pub located in Longton",
"Type": "Pub",
"Address": "14 Sutherland Rd, Stoke-on-Trent ST3 1HJ",
"Longitude": 2.1316,
"Latitude": 52.9878,
"icon": "bar"
},
"geometry": {
"coordinates": [
-2.131836,
52.987238
],
"type": "Point"
}
}
在工作状态下,API 生成的每个结果都应该在 map 上有自己的符号,该符号是通过 addLayer 方法生成的。非常感谢任何帮助!
最佳答案
以下是通过 d3 进行的 AJAX 调用的示例,用于将源和图层添加到 map :https://docs.mapbox.com/mapbox-gl-js/example/timeline-animation/
免责声明:我在 Mapbox 工作。
关于javascript - 有没有办法使用 Mapbox 将图层添加到通过 AJAX 回调生成的数据中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55840310/