Как нарисовать несколько кругов с разным радиусом в MapBox GL JS? - PullRequest
Новая
       82

Как нарисовать несколько кругов с разным радиусом в MapBox GL JS?

1 голос
/ 10 марта 2020

Я получаю некоторую информацию от AJAX и создаю Geo Json, выглядящий как 

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

Затем я обхожу oop вокруг объектов, чтобы получить данные и показать маркеры на моей карте. 

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

На этом этапе моя карта выглядит следующим образом: Карта с увеличением 15.32

Однако я хочу, чтобы окружность корректировалась при увеличении / уменьшении.

Например, если я увеличиваю: Карта при увеличении 17.32 Радиус круга не имеет был откорректирован (очевидно!)

Если у вас есть идеи, как я могу это сделать с помощью MapBox GL JS?

Я попытался использовать формулу (с здесь ), но безуспешно: 

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

Если я использую метод, описанный здесь , тогда я ставлю 

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

                });

Я получаю 3 круга на очко см. Здесь . Этот метод хорош тем, что увеличение / уменьшение масштаба не меняет размер, но как разместить на моей точке только соответствующий круг?

...