Интерактивность маркеров / точек mapbox в зависимости от выбранного метода визуализации

AFAIK, при нанесении маркеров на карту mapbox (Mapbox GL JS) у вас есть два варианта:

(a), чтобы отобразить их в виде стилей точек и слоев (в этом случае они отображаются в последний элемент <canvas>, они не подлежат проверке, они не могут получать: состояния наведения

(b), чтобы добавить их в качестве маркеров, которые затем останутся индивидуально проверяемыми элементами HTML. Обратной стороной этого метода является то, что они не масштабируются так плавно и быстро, как карта, так что небольшая инерция заметна.

Оба метода поддерживают взаимодействие (если вы укажете interactive: true в параметре (a)), хотя вы обрабатываете его по-разному.

Есть ли какие-либо другие ограничения любого из этих методов, которые я должен учитывать при создании интерактивной карты?


mapbox mapbox-gl-js mapbox-marker
person user776686    schedule 02.04.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это довольно широкий вопрос. Но в целом я вижу плюсы каждого метода в следующем:

  • Слои: часть карты, поэтому вы получаете обнаружение столкновений, стили на основе данных, стили на основе масштабирования и т. Д.
  • Маркеры: часть DOM, поэтому вы получаете события CSS, Javascript, простую интеграцию изображений и шрифтов и более простую обработку событий мыши, например :hover.

Не совсем верно сказать, что слои не поддерживают :hover. Вы можете обнаружить mouseOver, а затем сделать map.setFeatureState(), чтобы установить свойство наведения на функцию. Просто бесплатно не получишь.

person Steve Bennett    schedule 02.04.2019
comment
Верно. Я использовал этот метод setFeatureState сегодня. Работает отлично. Только переходы css недоступны, если вы хотите, например, выделить выделение маркера с помощью эффекта короткого свечения. Или я снова ошибаюсь? ;) - person user776686; 03.04.2019
comment
Я думаю, вы могли бы этого добиться. Mapbox-gl-js поддерживает анимированные переходы, но делать это нужно косвенно. Не стесняйтесь задать о них еще один вопрос. - person Steve Bennett; 04.04.2019