Добавление слоев в контрол

В Leaflet управление слоями реализуется через компонент L.control.layers, который предоставляет интерфейс переключения базовых карт и наложений. Контрол слоёв служит связующим звеном между объектами карты и пользовательским управлением их видимостью.

Архитектура слоёв и их типы

В системе слоёв выделяются два основных класса:

  • Base layers (базовые слои) — взаимоисключающие слои, из которых активен только один
  • Overlays (накладываемые слои) — независимые слои, которые могут включаться и выключаться одновременно

Базовые слои обычно представляют подложку карты (например, тайлы OpenStreetMap, спутниковые изображения, стилизованные карты). Накладываемые слои включают маркеры, полигоны, линии и другие векторные объекты.

Создание базовых и накладываемых слоёв

Слои формируются как объекты Leaflet:

const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

const satellite = L.tileLayer('https://server/satellite/{z}/{x}/{y}.png');

const cities = L.layerGroup();
cities.addLayer(L.marker([51.5, -0.09]));
cities.addLayer(L.marker([48.85, 2.35]));

Базовые слои чаще всего создаются через L.tileLayer, а накладываемые — через L.marker, L.polyline, L.polygon или объединяются в L.layerGroup.

Инициализация контроллера слоёв

Контрол создаётся через L.control.layers, которому передаются два объекта:

const baseMaps = {
  "OpenStreetMap": osm,
  "Satellite": satellite
};

const overlayMaps = {
  "Cities": cities
};

const layerControl = L.control.layers(baseMaps, overlayMaps);
layerControl.addTo(map);

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

Динамическое добавление базовых слоёв

Добавление новых базовых слоёв возможно после инициализации контрола:

layerControl.addBaseLayer(
  L.tileLayer('https://server/terrain/{z}/{x}/{y}.png'),
  "Terrain"
);

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

Динамическое добавление накладываемых слоёв

Для overlay-слоёв используется метод addOverlay:

const rivers = L.layerGroup();
rivers.addLayer(L.polyline([[50, 10], [51, 11]]));

layerControl.addOverlay(rivers, "Rivers");

Такая модель позволяет расширять карту в процессе выполнения программы без пересоздания интерфейса.

Связь с LayerGroup и FeatureGroup

L.layerGroup и L.featureGroup являются ключевыми контейнерами для управления наборами объектов:

  • L.layerGroup объединяет слои без дополнительной логики
  • L.featureGroup добавляет события и методы работы с геометрией
const parks = L.featureGroup([
  L.polygon([[52, 13], [52.1, 13.1], [52.2, 13]])
]);

Оба типа могут быть напрямую зарегистрированы в контроле слоёв как overlay.

Управление видимостью слоёв через контрол

Контрол слоёв синхронизируется с методами карты:

  • map.addLayer(layer) — добавление слоя
  • map.removeLayer(layer) — удаление слоя
  • переключение через UI контрола автоматически вызывает эти методы

Состояние контроллера всегда отражает фактическую структуру активных слоёв на карте.

Использование нескольких базовых наборов

При наличии нескольких подложек важно учитывать их взаимоисключаемость. Контрол гарантирует, что активен только один базовый слой:

const streets = L.tileLayer('...');
const dark = L.tileLayer('...');
const light = L.tileLayer('...');

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

Параметры конфигурации контрола

L.control.layers поддерживает дополнительные настройки:

L.control.layers(baseMaps, overlayMaps, {
  collapsed: true,
  position: 'topright'
});

Основные параметры:

  • collapsed — сворачиваемое отображение панели
  • position — расположение на карте (topleft, topright, bottomleft, bottomright)

Работа с событиями слоёв

Контрол слоёв опирается на события карты:

  • baselayerchange — смена базового слоя
  • overlayadd — включение накладываемого слоя
  • overlayremove — отключение накладываемого слоя
map.on('overlayadd', (e) => {
  console.log(e.name);
});

Эти события позволяют синхронизировать внешнюю логику с состоянием интерфейса.

Программное управление состоянием слоёв

Слои могут управляться без участия интерфейса:

map.addLayer(cities);
map.removeLayer(cities);

При этом контрол слоёв автоматически обновляет состояние чекбоксов и радиокнопок.

Интеграция сложных наборов данных

При работе с большими наборами геоданных слои часто группируются:

const earthquakes = L.featureGroup();
const stations = L.featureGroup();

layerControl.addOverlay(earthquakes, "Earthquakes");
layerControl.addOverlay(stations, "Stations");

Такая структура позволяет логически разделять данные по категориям, сохраняя единый интерфейс управления.

Поведение при масштабировании данных

При увеличении числа слоёв важно учитывать производительность. Контрол слоёв не ограничивает количество элементов, но производительность карты зависит от:

  • количества DOM-элементов в слоях
  • сложности векторной геометрии
  • частоты обновления слоёв

Оптимизация достигается через агрегацию объектов в группы и использование кластеризации маркеров.

Совместимость с кастомными слоями

Любой объект, реализующий интерфейс слоя Leaflet (addTo, onAdd, onRemove), может быть добавлен в контрол:

const customLayer = L.Class.extend({
  onAdd: function(map) {},
  onRemove: function(map) {}
});

Это позволяет интегрировать внешние источники данных и нестандартные визуализации в систему управления слоями.

Оглавление