Методы управления группами

В Leaflet группировка слоёв реализуется через два базовых контейнера: L.LayerGroup и L.FeatureGroup. Оба позволяют объединять несколько слоёв в единый объект, управлять ими как единым целым и применять массовые операции добавления, удаления и перебора.

L.LayerGroup: базовая структура группировки

L.LayerGroup представляет собой контейнер для любых слоёв: маркеров, тайловых слоёв, геометрий и пользовательских объектов.

Создание группы

const group = L.layerGroup();

Также возможно инициализировать сразу набор слоёв:

const group = L.layerGroup([
  L.marker([51.5, -0.09]),
  L.marker([51.51, -0.1]),
  L.polyline([[51.5, -0.09], [51.51, -0.1]])
]);

Методы управления L.LayerGroup

addLayer(layer)

Добавляет слой в группу.

group.addLayer(L.marker([51.5, -0.09]));

Возвращает сам объект группы, что позволяет строить цепочки вызовов.

removeLayer(layer)

Удаляет конкретный слой из группы.

group.removeLayer(marker);

Также можно передавать идентификатор слоя:

group.removeLayer(layerId);

hasLayer(layer)

Проверяет наличие слоя в группе.

if (group.hasLayer(marker)) {
  // слой присутствует
}

clearLayers()

Полностью очищает группу, удаляя все слои.

group.clearLayers();

Метод часто используется при полной перезагрузке данных.

getLayers()

Возвращает массив всех слоёв внутри группы.

const layers = group.getLayers();

Результат можно использовать для итерации или анализа структуры.

eachLayer(fn)

Позволяет пройтись по каждому слою группы.

group.eachLayer(layer => {
  console.log(layer);
});

Внутри callback доступен каждый слой без необходимости извлечения массива.

addTo(map)

Добавляет всю группу на карту как единый слой.

group.addTo(map);

Эквивалент:

map.addLayer(group);

removeFrom(map)

Удаляет группу с карты.

group.removeFrom(map);

FeatureGroup: расширенное управление объектами

L.FeatureGroup наследуется от LayerGroup, но добавляет функциональность, связанную с векторными объектами: маркерами, полигонами, линиями.

Создание FeatureGroup

const featureGroup = L.featureGroup([
  L.marker([51.5, -0.09]),
  L.circle([51.51, -0.1], { radius: 200 })
]);

Дополнительные методы FeatureGroup

getBounds()

Возвращает ограничивающий прямоугольник всех слоёв группы.

const bounds = featureGroup.getBounds();
map.fitBounds(bounds);

Метод особенно важен для автоматического масштабирования карты под содержимое группы.

bindPopup(content)

Привязывает всплывающее окно ко всей группе.

featureGroup.bindPopup('Объекты группы');

Popup будет активироваться при взаимодействии с любым элементом внутри группы.

bindTooltip(content)

Привязывает tooltip ко всей группе.

featureGroup.bindTooltip('Информация');

on(event, handler)

FeatureGroup поддерживает обработку событий как единый объект.

featureGroup.on('click', e => {
  console.log('Клик по любому объекту группы');
});

События делегируются от дочерних элементов к группе.

Управление слоями через карту

Карта Leaflet также предоставляет методы управления слоями, включая группы.

map.addLayer(layer)

Добавляет слой или группу.

map.addLayer(group);

map.removeLayer(layer)

Удаляет слой или группу с карты.

map.removeLayer(group);

map.hasLayer(layer)

Проверяет наличие слоя на карте.

map.hasLayer(group);

Вложенные группы слоёв

Группы могут содержать другие группы, создавая иерархическую структуру.

const innerGroup = L.layerGroup([
  L.marker([51.5, -0.09])
]);

const outerGroup = L.layerGroup([innerGroup]);

outerGroup.addTo(map);

При управлении такой структурой методы clearLayers, removeLayer и eachLayer применяются рекурсивно только к первому уровню, без автоматического глубокого обхода.

Итерация и контроль вложенности

Для сложных структур используется комбинированный обход:

outerGroup.eachLayer(layer => {
  if (layer instanceof L.LayerGroup) {
    layer.eachLayer(inner => {
      console.log(inner);
    });
  } else {
    console.log(layer);
  }
});

Управление идентификаторами слоёв

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

getLayer(id)

Доступ к слою по идентификатору (доступен в FeatureGroup).

const layer = featureGroup.getLayer(id);

getLayerId(layer)

Получение идентификатора слоя.

const id = featureGroup.getLayerId(marker);

Практика массовых операций

Группы слоёв часто используются для пакетного управления отображением данных.

Переключение видимости набора объектов

if (map.hasLayer(group)) {
  map.removeLayer(group);
} else {
  map.addLayer(group);
}

Обновление содержимого группы

group.clearLayers();

data.forEach(item => {
  group.addLayer(L.marker([item.lat, item.lng]));
});

Автоматическая подгонка области карты

map.fitBounds(featureGroup.getBounds());

Событийная модель групп

События внутри FeatureGroup распространяются от дочерних слоёв вверх.

featureGroup.on('mouseover', e => {
  console.log('Наведение на элемент группы');
});

Каждый дочерний слой остаётся источником события, но группа получает агрегированный поток событий.

Ограничения и особенности поведения

  • LayerGroup не хранит геометрическую информацию
  • FeatureGroup ориентирован на векторные объекты
  • clearLayers() не вызывает индивидуальные пользовательские очистки слоёв
  • вложенные группы не всегда обрабатываются рекурсивно встроенными методами
  • getBounds() доступен только для FeatureGroup

Типовые сценарии использования групп

Управление слоями по категориям

const restaurants = L.layerGroup();
const parks = L.layerGroup();
const transport = L.layerGroup();

Фильтрация данных без перерисовки карты

map.addLayer(restaurants);
map.removeLayer(parks);

Динамическая загрузка данных

fetch('/api/points')
  .then(res => res.json())
  .then(data => {
    group.clearLayers();

    data.forEach(p => {
      group.addLayer(L.marker([p.lat, p.lng]));
    });
  });
Оглавление