javascript - 有没有办法将 API 数据转换为 Mapbox 图层？

Question

我下面有一个回调函数，它能够从 Eventbrite API 生成数据。目前此功能可以通过“新标记”方法在我的 Mapbox map 上生成标记。但是，我想通过“Mapbox addLayer”方法将此数据生成到 map 上的图层中，而不是标记。

    callbackEventbrite(function(result){
    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}
        );
    }
});

我基本上想要这个，它根据几何图形的坐标在 map 上生成符号，但使用 API 数据代替。

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"
                      }
                    },

非常感谢任何帮助!谢谢

Answer 1

这应该相当简单，您只需要根据 Eventbrite 响应构建一个特征数组。

1. 首先构建一组要在源代码中使用的 geojson 功能。

2. 然后在添加图层之前，将源单独添加到 map 中。您将使用刚刚在源中创建的特征数组。

3. 将源添加到 map 后，您可以创建图层并在图层中引用源。

试试下面的代码让你开始。让我知道它是否适合您的情况。

var featureArr;
callbackEventbrite(function(result) {
  const keys = Object.values(result);
  for (const key of keys) {
    var feature = {
      "type": "Feature",
      "id": key.venue.id,
      "geometry": {
        "type": "Point",
        "coordinates": [key.venue.longitude, key.venue.latitude]
      },
      "properties": {
        "title": key.venue.name,
        "description": key.venue.description,
        "icon": "bar"
      }
    };
    featureArr.push(feature);
  }
}


map.addSource("mySource", {
  "type": "geojson",
  "data": {
    "type": "FeatureCollection",
    "features": featureArr
  }
});

map.addLayer({
  "id": "locations",
  "type": "symbol",
  "source": "mySource",
  "layout": {
    "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
    "text-offset": [0, 0.6],
    "text-anchor": "top",
  }
});

注意:我不知道 Eventbrite 的响应对象中有什么，所以一些 key.value.xyz 是由变量组成的