Параметры конструктора L.map

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

Сигнатура конструктора

Конструктор карты имеет следующий базовый вид:

L.map(id, options)

или

L.map(element, options)

Где:

  • id — строка с идентификатором DOM-элемента (div), внутри которого будет отрисована карта
  • element — непосредственно DOM-узел
  • options — объект конфигурации карты

Базовые параметры options

Объект настроек определяет поведение карты на старте и в процессе работы.

center

Определяет начальную географическую точку центра карты.

center: [latitude, longitude]

Пример:

center: [51.505, -0.09]

Особенности:

  • порядок координат строго [lat, lng]
  • задаётся в градусах
  • используется только при инициализации (дальнейшие изменения выполняются через методы setView, panTo)

zoom

Начальный масштаб отображения карты.

zoom: 13

Поведение:

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

minZoom и maxZoom

Ограничивают диапазон масштабирования.

minZoom: 5,
maxZoom: 18

Назначение:

  • предотвращают уход карты в пустые или перегруженные уровни
  • помогают контролировать производительность и UX

layers

Массив слоёв, добавляемых сразу при создании карты.

layers: [tileLayer, marker, polyline]

Особенности:

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

maxBounds

Ограничивает область перемещения карты.

maxBounds: [[southWestLat, southWestLng], [northEastLat, northEastLng]]

Пример:

maxBounds: [
  [50, -5],
  [55, 2]
]

Поведение:

  • карта не позволяет выйти за заданные границы
  • полезно для региональных приложений (города, страны, кампусы)

crs

Система координат (Coordinate Reference System).

crs: L.CRS.EPSG3857

Основные варианты:

  • L.CRS.EPSG3857 — стандартная веб-меркатор проекция (по умолчанию)
  • L.CRS.EPSG4326 — географическая система координат
  • кастомные CRS для нестандартных карт

Влияние:

  • определяет математическую модель отображения
  • влияет на поведение тайлов и координат

zoomControl

Включает или отключает стандартные кнопки масштабирования.

zoomControl: true

или

zoomControl: false

Особенности:

  • при false управление масштабом нужно реализовывать вручную
  • часто отключается при кастомных интерфейсах

attributionControl

Контролирует отображение атрибуции (копирайтов источников карт).

attributionControl: true

Назначение:

  • юридическое требование большинства tile-провайдеров
  • может быть переопределено или стилизовано

keyboard

Включает управление картой с клавиатуры.

keyboard: true

Поведение:

  • стрелки перемещают карту
  • + / - управляют масштабом
  • Home возвращает к начальному виду

scrollWheelZoom

Управляет масштабированием колесом мыши.

scrollWheelZoom: true

Возможные значения:

  • true — всегда включено
  • false — отключено
  • 'center' — масштабирование относительно центра карты

dragging

Включает перетаскивание карты мышью.

dragging: true

Особенности:

  • критично для мобильного UX
  • может отключаться для статичных карт

touchZoom

Поддержка pinch-zoom на сенсорных устройствах.

touchZoom: true

doubleClickZoom

Управляет поведением двойного клика.

doubleClickZoom: true

По умолчанию:

  • двойной клик увеличивает масштаб

boxZoom

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

boxZoom: true

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

const map = L.map('map', {
  center: [51.505, -0.09],
  zoom: 13,
  minZoom: 4,
  maxZoom: 18,
  maxBounds: [
    [50, -5],
    [55, 2]
  ],
  zoomControl: true,
  attributionControl: true,
  scrollWheelZoom: true,
  dragging: true,
  touchZoom: true,
  doubleClickZoom: true,
  boxZoom: false,
  keyboard: true
});

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

Приоритет настроек

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

  • отключение dragging делает невозможным панорамирование, даже при включённом keyboard
  • maxBounds ограничивает все формы перемещения
  • minZoom и maxZoom переопределяют поведение любых контролов масштабирования

Инициализация и жизненный цикл

options применяются только один раз — в момент создания экземпляра:

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

Дальнейшие изменения требуют методов:

  • setView
  • setZoom
  • fitBounds
  • setMaxBounds

Производственные сценарии настройки

Карта как статичный виджет

{
  dragging: false,
  scrollWheelZoom: false,
  doubleClickZoom: false,
  zoomControl: false
}

Используется в отчётах, превью и аналитических панелях.

Карта для мобильного интерфейса

{
  touchZoom: true,
  dragging: true,
  scrollWheelZoom: false
}

Ориентирована на жестовое управление.

Карта с ограничением региона

{
  maxBounds: [[55, 30], [45, 40]],
  minZoom: 6,
  maxZoom: 14
}

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

Влияние параметров на производительность

Некоторые опции косвенно влияют на нагрузку:

  • boxZoom и touchZoom увеличивают количество событий обработки
  • maxBounds снижает необходимость отрисовки вне области
  • отключение dragging уменьшает количество перерисовок тайлов

Взаимодействие с DOM-контейнером

Перед созданием карты контейнер должен иметь размеры:

<div id="map" style="height: 500px;"></div>

Если размеры отсутствуют, параметры center и zoom будут применены некорректно визуально, несмотря на корректную инициализацию объекта.

Особенности работы с CRS в контексте параметров

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

crs: L.CRS.EPSG4326

изменяется:

  • поведение zoom
  • интерпретация координат center
  • работа maxBounds

Это требует согласованности всех геопространственных данных слоя.

Поведение контролов при инициализации

Некоторые контролы создаются автоматически:

  • zoomControl
  • attributionControl

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

Свод логики параметров

  • center и zoom задают начальное состояние камеры
  • параметры взаимодействия управляют UX слоя карты
  • ограничения (minZoom, maxBounds) формируют рамки поведения
  • CRS определяет геометрическую модель всей системы
  • layers позволяет сразу собрать композицию карты без дополнительных вызовов
Оглавление