Маркеры Mapbox мигают при использовании `icon-allow-overlap`

У меня есть карта, использующая mapboxgl-js для скрытия или отображения маркеров карты на основе некоторых критериев.

Скрытие маркеров работает, как и ожидалось, но когда я хочу, чтобы маркеры снова отображались, они мигают в течение нескольких миллисекунд, а затем снова исчезают, пока карта скрывает метки (названия улиц и т. д.) на нижележащем слое, прежде чем они снова появятся.

Смотрите это видео: https://streamable.com/debcp

См. этот код: https://codepen.io/jakobfuchs/details/VRRgJO

Я пришел к выводу, что это вызвано установкой 'icon-allow-overlap': true на слое символа маркера.

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

Странно то, что это происходит не в 100% случаев, а примерно в 95%.

Примеры кода:

Маркерный слой:

  map.addLayer({
    id: 'property-layer',
    type: 'symbol',
    source: 'properties',
    filter: ['!has', 'point_count'],
    layout: {
      'symbol-placement': 'point',
      'icon-image': 'marker',
      'icon-size': 1,
      'icon-anchor': 'bottom',
      'icon-allow-overlap': true,
    }
  });

Код фильтра:

  const filterToggle = document.getElementById('filterToggle');
  filterToggle.addEventListener('change', function(e) {
    if (openPopup) {
      openPopup.remove();
      openPopup = '';
    }
    let properties;
    if (this.checked) {
      properties = {
        type: "FeatureCollection",
        features: features.features.filter((property) => property.properties.availability === 'Available')
      }
    } else {
      properties = features;
    }
    map.getSource('properties').setData(properties);
  });

Я не обязательно знаю, что это виновник, но есть ли причина, по которой вы переписываете свой источник каждый раз, когда используется переключатель? Возможно, вы обнаружите, что более простым подходом было бы использовать вместо этого setFeatureState. (см. этот пример: docs.mapbox.com/mapbox-gl-js/example/hover-styles)

riastrad 29.05.2019 22:11
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
1
3 221
1

Ответы 1

Я столкнулся с той же проблемой, и мое решение - использовать значок-игнорировать-размещение вместо значок-разрешить-перекрытие, и у него все еще нет проблем.

Вы можете найти документ здесь: https://docs.mapbox.com/mapbox-gl-js/style-spec/#layout-symbol-icon-ignore-placement

Надеюсь, это поможет, спасибо!

Другие вопросы по теме