Question

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

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

我基本上想要this，它基于几何坐标在地图上生成符号，但是使用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响应中构建特征数组。

首先构建要在您的源代码中使用的geojson功能数组。
然后分别在添加图层之前将源添加到地图。您将使用刚刚在源代码中创建的要素数组。
将源添加到地图后，您可以创建一个图层并在图层中引用该源。

尝试以下代码即可开始使用。让我知道它是否适合您的情况。

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是变量

有没有一种方法可以将API数据转换为Mapbox图层？

1 个答案: