Control.Zoom: масштабирование

Назначение и роль Control.Zoom

Control.Zoom представляет собой встроенный элемент интерфейса библиотеки Leaflet, отвечающий за управление масштабом карты. Он реализует стандартный UI-компонент с кнопками увеличения и уменьшения масштаба, а также обеспечивает доступ к базовым операциям навигации без обращения к программному API карты напрямую.

Контрол масштабирования является частью системы Control и по умолчанию добавляется ко всем экземплярам карты, если явно не отключён. Он взаимодействует с методами Map, такими как zoomIn, zoomOut и setZoom, но инкапсулирует эти действия в визуальный интерфейс.

Внутренняя структура Control.Zoom

Control.Zoom наследуется от базового класса Control. Его поведение определяется следующими ключевыми элементами:

  • контейнер DOM, содержащий кнопки управления
  • обработчики событий клика
  • связь с объектом карты
  • параметры конфигурации интерфейса

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

Добавление Control.Zoom на карту

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

Стандартное поведение

const map = L.map('map').setView([51.505, -0.09], 13);

В этом случае Control.Zoom добавляется автоматически.

Явное управление через опции

const map = L.map('map', {
  zoomControl: true
}).setView([51.505, -0.09], 13);

Ручное добавление

const map = L.map('map', {
  zoomControl: false
}).setView([51.505, -0.09], 13);

L.control.zoom({
  position: 'topright'
}).addTo(map);

Параметры конфигурации Control.Zoom

Контрол поддерживает набор параметров, влияющих на внешний вид и поведение.

position

Определяет расположение элемента на карте.

Допустимые значения:

  • topleft
  • topright
  • bottomleft
  • bottomright
L.control.zoom({
  position: 'bottomright'
}).addTo(map);

zoomInText и zoomOutText

Позволяют заменить текст внутри кнопок.

L.control.zoom({
  zoomInText: '+',
  zoomOutText: '-'
}).addTo(map);

zoomInTitle и zoomOutTitle

Используются для атрибутов title, влияющих на подсказки и доступность.

L.control.zoom({
  zoomInTitle: 'Увеличить масштаб',
  zoomOutTitle: 'Уменьшить масштаб'
}).addTo(map);

Взаимодействие с API карты

Control.Zoom напрямую вызывает методы объекта карты:

  • map.zoomIn(step)
  • map.zoomOut(step)
  • map.setZoom(level)

Пример эквивалентности действий

map.zoomIn();
map.zoomOut();

Идентично нажатию кнопок контроллера.

Программное управление масштабированием

Хотя Control.Zoom предоставляет UI, логика масштабирования остаётся в API карты.

Увеличение масштаба

map.zoomIn(1);

Уменьшение масштаба

map.zoomOut(1);

Установка конкретного уровня

map.setZoom(10);

Удаление Control.Zoom

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

const zoomControl = L.control.zoom().addTo(map);
map.removeControl(zoomControl);

Либо через отключение при создании карты:

const map = L.map('map', {
  zoomControl: false
});

Кастомизация внешнего вида

Control.Zoom использует стандартные CSS-классы:

  • .leaflet-control-zoom
  • .leaflet-control-zoom-in
  • .leaflet-control-zoom-out

Пример изменения стиля

.leaflet-control-zoom a {
  background-color: #222;
  color: #fff;
  border-radius: 4px;
}

.leaflet-control-zoom a:hover {
  background-color: #444;
}

Расширение поведения Control.Zoom

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

const CustomZoom = L.Control.Zoom.extend({
  options: {
    position: 'topright'
  }
});

new CustomZoom().addTo(map);

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

Control.Zoom работает в рамках ограничений карты:

const map = L.map('map', {
  minZoom: 5,
  maxZoom: 18
});

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

Связь с событиями карты

При использовании Control.Zoom инициируются стандартные события:

  • zoomstart
  • zoomend
  • zoomlevelschange
map.on('zoomend', () => {
  console.log(map.getZoom());
});

Доступность и семантика

Control.Zoom использует HTML-кнопки с атрибутами title, что обеспечивает базовую поддержку accessibility.

Рекомендуется задавать локализованные значения:

L.control.zoom({
  zoomInTitle: 'Увеличить',
  zoomOutTitle: 'Уменьшить'
}).addTo(map);

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

При совместном использовании нескольких контролов порядок слоёв интерфейса влияет на визуальную композицию.

Пример расположения:

L.control.zoom({ position: 'topright' }).addTo(map);
L.control.layers(baseLayers, overlays, { position: 'topright' }).addTo(map);

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

Поведение при мобильных устройствах

На сенсорных устройствах Control.Zoom часто дополняет жесты pinch-to-zoom. При этом:

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

Совместное использование не конфликтует.

Интеграция с состоянием приложения

Control.Zoom не хранит состояние самостоятельно. Все изменения уровня масштаба происходят через объект карты:

const currentZoom = map.getZoom();

Синхронизация UI и состояния карты происходит автоматически через события Leaflet.

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

const map = L.map('map', {
  zoomControl: false,
  minZoom: 3,
  maxZoom: 16
}).setView([40.7128, -74.0060], 10);

L.control.zoom({
  position: 'bottomright',
  zoomInText: '+',
  zoomOutText: '-',
  zoomInTitle: 'Zoom in',
  zoomOutTitle: 'Zoom out'
}).addTo(map);
Оглавление