Изменить значок Mapbox на мероприятии - PullRequest
Новая
       9

Изменить значок Mapbox на мероприятии

0 голосов
/ 24 марта 2020

Я добавляю несколько circle значков к слою в mapbox, и он работает хорошо, но мне нужно обновить значок (изменить значок) указанного c geoLo c после события. Теперь часть события не проблема, но я понятия не имею, как изменить значок (после инициализации карты, без повторной инициализации карты).

Не уверен, что это полезно, но вот как Geo JSON выглядит так: 

"type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.341896,
          53.710173
        ]
      },
      "properties": {
        "icon": "circle",
        "id": "392"
      }
    }, ... {} ... {}
  ]
}

И как я инициализирую слой стиля 

this.map.addLayer({
    'id': 'markers',
    'type': 'symbol',
    'source': 'source-markers',
    'layout': {
        'icon-image': '{icon}-15-theme',
        'icon-size': 1,
        'icon-allow-overlap': true,
    },
    'paint': {
        'icon-color': '#00a19a'
    },
    'filter': ['all', ['!has', 'point_count']],
}, addBelowLayer);

Короче говоря, каждый набор координат имеет круг, который представляет его местоположение, когда я нажимаю на круг, который он должен увеличить и изменить форму на квадрат. Увеличение работает, но я не могу понять, как изменить значок на квадрат. Я добавил квадратный значок в свой стиль карты, но не знаю, как это сделать.

Есть идеи? (с использованием Mapbox GL JS)

Ответы [ 2 ]

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

Вы можете использовать Map#setLayoutProperty метод внутри прослушивателя событий карты, передавая:

  • 'markers' в качестве аргумента layerId,
  • icon-image в качестве аргумента name свойства макета для установки и
  • имени квадратного изображения на вашем листе спрайта как value аргумент.

Итак, что-то вроде: 

map.setLayoutProperty('markers', 'icon-image', 'square-15-theme');
0 голосов
/ 25 марта 2020

Пользователь @ adriana-babakanian предоставил полезную идею, поэтому я развил ее. Я создал новый слой для каждой геолокации, а затем для события, которое я использовал, использовал метод map.setLayoutProperty, чтобы показать или скрыть нужный слой, передав идентификатор.

map.setLayoutProperty('focus-markers-' + id, 'visibility', 'visible');

Более подробная информация может найти на этой странице карты api https://docs.mapbox.com/mapbox-gl-js/example/toggle-layers/

...