Как переместить отдельные точки слоя в MapBox?

Question

Я только начинаю работу с MapBox и успешно создал стиль с помощью MapBox Studio. У этого стиля есть слой, полный точек из набора данных, который я загрузил.

Я хотел бы создать эффект, благодаря которому некоторые из этих точек находятся в постоянном движении. Я знаю, что могу переместить все точки, применяя setPaintProperty к свойству circle-translate. Но как насчет отдельных?

Другими словами, как мне перемещать отдельные точки, которые я добавил на свою карту в MapBox Studio из JavaScript?

Answer 1

Обычным способом перемещения некоторых точек является использование .setData() для обновления всего набора данных.

См. Этот пример для этого подхода: https://www.mapbox.com/mapbox-gl-js/example/rotating-controllable-marker/

Ваш альтернативный метод, использующий circle-translate, звучит так, как будто он будет работать для перемещения некоторых точек, если он поддерживает стилевое управление, которое не поддерживает .

Однако, если вы согласны с наличием слоя, в котором все точки движутся одинаково, то это должно работать:

let offset = [0, 0];

map.addLayer({
  id: 'somepoints',
  type: 'circle',
  paint: {
    'circle-translate': offset
  },
  filter: [...insert filter here...]
});

Всякий раз, когда вам нужны очки для перемещения:

offset = [3, -2]; // or whatever
map.setPaintProperty('somepoints','circle-translate', offset);