如何在MapBox GL JS中绘制半径不同的多个圆？

Question

我从AJAX获得了一些信息，并创建了一个类似于

的GeoJson

var waypointGeojson = {
  'type': 'FeatureCollection',
  'features': [{
    'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [100, 100]
    },
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
  }, {
    'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [25,25]
    }, {
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
    }, 'type': 'Feature',
    'properties': {
      'id': waypoint.poi_id,
      'name': waypoint.name,
      'iconSize': [35,35]
    },
    'geometry': {
      'type': 'Point',
      'coordinates': [waypoint.longitude, waypoint.latitude], 
    }, 
  ]
};

然后我将源代码添加到地图中：

map.addSource('waypoints', {
  'type': 'geojson',
  'data': waypointGeojson,
});

然后我在“要素”周围循环以获取数据并在地图上显示标记。

waypointGeojson.features.forEach(function(marker) {
  var radius = Number(marker.properties.iconSize[0]);
  var latitude = Number(marker.geometry.coordinates[1]);
  var el = document.createElement('div');
  el.className = 'marker';
  el.style.backgroundColor = 'rgba(230, 56, 18, 0.5)' ;
  el.style.width = radius + 'px';
  el.style.height = radius + 'px';

  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
}

在这一步，我的地图如下所示： Map at Zoom 15.32

但是我希望在放大/缩小时调整圆。

例如，如果我放大： Map at Zoom 17.32尚未调整圆半径（很明显！）

如果您知道如何使用MapBox GL JS做到这一点？

我确实尝试使用公式（来自here），但没有成功：

const metersToPixelsAtMaxZoom = (meters, latitude) =>
meters / 0.075 / Math.cos(latitude * Math.PI / 180)

如果我使用here描述的方法，那么我将

waypointGeojson.features.forEach(function(marker) {
                    var id = Number(marker.properties.id);
                    var radius = Number(marker.properties.iconSize[0]);
                    var latitude = Number(marker.geometry.coordinates[1])


                    map.addLayer({
                        "id": "circle"+id,
                        "type": "circle",
                        "source": "waypoints",
                        // "layout": {
                        //     "visibility": "none"
                        // },
                        "paint": {
                            "circle-radius": {
                                stops: [
                                  [0, 0],
                                  [20, metersToPixelsAtMaxZoom(radius, latitude)]
                                ],
                                base: 2
                              },
                            "circle-color": "red",
                            "circle-opacity": 0.4
                        }
                    });

                });

我每点see here得到3个圆圈。此方法很好，因为放大/缩小不会改变大小，但是如何只在我的点上有相应的圆？