На момент написания Mapbox -gl предоставляет возможность кластеризации слоев, но не возможность спайдеризации / извлечения функций из этих кластеров. Это не значит, что пользователь не может увеличивать масштаб до тех пор, пока эти кластеры не распадутся, но иногда это вызывает слишком много нажатий клавиш / движений мыши для пользователя. После небольшого покопания становится ясно, что функциональность находится под капотом mapbox-gl, но еще не доступна для использования разработчиками. Есть множество примеров того, как этого добиться, и мы не говорим, что это единственный способ, но это тот способ, который лучше всего сработал для нас.

Необходимые библиотеки

Основной поток

Допустим, мы собираемся добавить на нашу карту слой всех ресторанов быстрого питания в этом районе. Шаги будут следующими:

  1. Получите данные geojson быстрого питания из API
  2. Добавьте источник данных быстрого питания на основе geojson из шага 1
  3. Добавить слой быстрого питания со стилем кластера
  4. Добавьте supercluster экземпляр для слоя быстрого питания с правильными уровнями масштабирования из стиля слоя быстрого питания.

После этого будет два экземпляра supercluster; один, которым будет управлять mapbox, и один, которым будем управлять. Пока наша версия суперкластера совпадает с версией суперкластера mapbox, идентификаторы кластера будут совпадать. Это важно при извлечении объектов из паука на карту. Это может усложнить задачу, потому что оба экземпляра суперкластера должны быть синхронизированы, но есть события для изменений источника данных, которые делают это немного проще.

ПРИМЕЧАНИЕ. На момент написания этой статьи supercluster 2.3 - это текущая версия, используемая mapbox-gl, но выпущена supercluster 3.X, и они могут обновиться до нее в любое время.

Настройка supercluster

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

Очень важно установить radius, extent, maxZoom, как показано в приведенном выше примере. Это те же поля, которые Mapbox устанавливает при создании объекта суперкластера под капотом.

Число 8192 происходит от константы в библиотеке mapbox-gl под названием EXTENT. Подробнее об этом вы можете прочитать в исходниках mapbox. Он нужен нам для того, чтобы рассчитать масштаб в то время, чтобы мы могли убедиться, что радиус кластера соответствует тайлу. Еще одна важная вещь, на которую следует обратить внимание, это то, что maxZoom на единицу меньше максимального масштабирования слоя. Это гарантирует, что элементы отображаются как отдельные элементы, а не кластеры при максимальном уровне масштабирования слоев.

Получение данных из кластерной функции

Чтобы получить данные из кластера для их спайдерификации или отображения, предпринимаются следующие шаги:

  1. Кластер на карте нажат
  2. Событие щелчка по слою возвращает объект, который представляет supercluster, который содержитcluster_id
  3. Используйте cluster_id для запроса supercluster экземпляров, относящихся к слою
  4. Наконец, когда у нас есть функции из системы, мы можем либо передать их библиотеке spiderify, либо обработать функции по мере необходимости.

ПРИМЕЧАНИЕ. Помните, что это более старая версия суперкластера, где getLeaves() требуется уровень масштабирования.

Перенос данных на карту

ПРИМЕЧАНИЕ. Следует иметь в виду, что место, указанное в событии, - это место, где пользователь щелкнул на карте, а не точное местоположение объекта. Если вы этого хотите, извлеките это из выбранной функции.

Наконец, просмотр данных

Логика просмотра данных разбита на функции, чтобы упростить отслеживание и реализацию. Есть метод закрытия и метод без спайдера. Метод close определяет, имеет ли событие свойства spiderify, и находит связанный контейнер карты. Если событие связано с данными с пауками, контейнер карты передается методу unspiderify. Этот метод удаляет маркеры spiderify, а затем отключает событие close spider map.

Ресурсы

GitHub - mapbox-gl-js / geojson_source.js · Настройка конфигурации суперкластера
GitHub - mapbox-gl-js / extension.js · Определение EXTENT
GitHub - mapbox / supercluster: A сумасшедшая быстрая библиотека кластеризации геопространственных точек для браузеров и узлов.
GitHub - bewithjonam / mapboxgl-spiderifier: Spiderify markers на mapbox-gl
GitHub - Просмотр функций в кластере · Проблема № 3318 · mapbox / mapbox-gl-js
GitHub - Щелкните точки кластера, чтобы получить все свойства содержащихся точек. · Проблема № 2661 · mapbox / mapbox-gl-js
JSFiddle - Еще один способ извлечения функций из cluster · barrylachapelle
Документация Mapbox GL JS API о mapdataevent