Класс Map

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

Создание карты выполняется через конструктор, который связывает HTML-элемент с внутренним экземпляром карты и задаёт начальные параметры отображения:

const map = L.map('map');

Первым аргументом передаётся идентификатор DOM-элемента или сам элемент. Внутри создаётся объект, который управляет:

  • системой координат (проекция Web Mercator по умолчанию);
  • слоем тайлов и их загрузкой;
  • обработчиками событий мыши и касаний;
  • состоянием представления (центр, масштаб, границы).

При инициализации карта не содержит визуального контента, если не добавлен слой тайлов или другие слои.

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

Конфигурация передаётся вторым аргументом:

const map = L.map('map', {
  center: [51.505, -0.09],
  zoom: 13,
  minZoom: 3,
  maxZoom: 18,
  zoomControl: true,
  attributionControl: true
});

Ключевые параметры:

  • center — начальная географическая точка центра карты в формате [lat, lng].
  • zoom — стартовый уровень масштаба.
  • minZoom / maxZoom — ограничения масштабирования.
  • zoomControl — включение стандартных кнопок масштабирования.
  • attributionControl — отображение блока атрибуции источников данных.

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

Координатная система и проекция

По умолчанию используется проекция EPSG:3857 (Web Mercator), что позволяет отображать тайловые карты из большинства провайдеров. Карта оперирует двумя основными сущностями:

  • географические координаты (широта и долгота);
  • пиксельные координаты внутри текущего масштаба.

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

Управление центром и масштабом

Изменение положения карты осуществляется через методы:

map.setView([51.505, -0.09], 13);

или раздельно:

map.setZoom(10);
map.setCenter([51.5, -0.1]);

Дополнительно поддерживаются плавные переходы:

map.flyTo([51.505, -0.09], 12);

Метод flyTo выполняет анимацию перемещения с интерполяцией центра и масштаба, включая ускорение и замедление движения.

Ограничение области просмотра

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

const bounds = [
  [51.49, -0.08],
  [51.5, -0.06]
];

map.setMaxBounds(bounds);

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

Работа с размерами контейнера

Карты Leaflet зависят от размера DOM-элемента. При изменении размеров контейнера необходимо уведомить карту:

map.invalidateSize();

Метод пересчитывает внутренние пиксельные координаты и перерисовывает слои. Без этого возможны смещения тайлов и некорректная отрисовка.

Система слоёв

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

  • тайловые слои (растровые карты);
  • векторные слои (линии, полигоны);
  • маркеры;
  • группы слоёв.

Добавление слоя:

L.tileLayer(urlTemplate).addTo(map);

Удаление:

map.removeLayer(layer);

Каждый слой регистрируется внутри карты и участвует в жизненном цикле рендеринга.

Событийная модель

Карта генерирует события, отражающие действия пользователя и изменения состояния:

  • click — клик по карте;
  • move — перемещение центра;
  • zoom — изменение масштаба;
  • load — завершение загрузки карты;
  • resize — изменение размера контейнера.

Подписка на событие:

map.on('click', function (e) {
  console.log(e.latlng);
});

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

Анимации и переходы состояния

Карты поддерживают анимацию перемещения и масштабирования. Внутренне используется интерполяция между состояниями:

  • центр карты;
  • уровень масштабирования;
  • смещение панелей тайлов.

Пример комбинированной анимации:

map.flyTo([51.51, -0.1], 15, {
  duration: 2
});

Параметр duration определяет длительность перехода в секундах.

Работа с ограничениями масштабирования

Масштаб контролируется через диапазон уровней детализации:

map.setMinZoom(5);
map.setMaxZoom(18);

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

Также возможна проверка текущего состояния:

map.getZoom();
map.getMinZoom();
map.getMaxZoom();

Преобразование координат

Карта предоставляет методы для конвертации координат:

map.latLngToContainerPoint([51.5, -0.09]);
map.containerPointToLatLng([200, 300]);

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

Управление поведением

Поведение карты регулируется параметрами взаимодействия:

  • перетаскивание;
  • масштабирование колесом мыши;
  • управление жестами на сенсорных устройствах.

Пример отключения перетаскивания:

map.dragging.disable();

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

Атрибуция и элементы интерфейса

Карта содержит встроенные UI-компоненты:

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

Удаление стандартного контроля:

map.removeControl(map.zoomControl);

Добавление пользовательских элементов выполняется через систему контролов, которые привязываются к DOM-контейнерам внутри карты.

Состояние и жизненный цикл

Экземпляр карты проходит несколько этапов:

  • создание и привязка к контейнеру;
  • инициализация слоёв и проекции;
  • загрузка тайлов и данных;
  • обработка взаимодействий;
  • обновление состояния при изменениях.

При уничтожении используется:

map.remove();

Этот вызов освобождает память, удаляет обработчики событий и очищает DOM-связи.

Оглавление