Control.Scale: масштабная линейка

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

Масштабная линейка динамически пересчитывает отображаемую длину отрезка на экране в зависимости от текущего уровня масштабирования карты. В основе лежит преобразование пикселей в метры (или футы) с учётом проекции карты и текущей широты, поскольку масштаб в Leaflet не является линейным по всей поверхности карты.

При изменении масштаба карты контрол пересчитывает:

  • длину полосы в пикселях
  • соответствующее расстояние в метрах или километрах
  • альтернативно — в футах и милях

Создание и добавление на карту

Масштабная линейка создаётся через L.control.scale и добавляется на карту как обычный контрол.

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

L.control.scale().addTo(map);

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

Основные параметры конфигурации

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

Параметр position

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

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

  • topleft
  • topright
  • bottomleft
  • bottomright

Пример:

L.control.scale({
  position: 'bottomright'
}).addTo(map);

Отображаемые системы измерения

Параметр metric

Управляет отображением метрической системы измерения.

  • true — отображаются метры и километры
  • false — отключает метрическую шкалу
L.control.scale({
  metric: true
}).addTo(map);

Параметр imperial

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

  • true — отображаются футы и мили
  • false — отключает имперскую шкалу
L.control.scale({
  imperial: true
}).addTo(map);

Комбинация параметров позволяет выводить одну или обе шкалы одновременно.

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

При включении обеих систем шкала отображает два уровня:

  • верхняя или основная линия — метры/километры
  • дополнительная — футы/мили
L.control.scale({
  metric: true,
  imperial: true
}).addTo(map);

Ограничение ширины шкалы

Параметр maxWidth

Определяет максимальную ширину масштабной линейки в пикселях. Используется для предотвращения чрезмерного расширения элемента на больших масштабах.

L.control.scale({
  maxWidth: 200
}).addTo(map);

Алгоритм Leaflet автоматически подбирает удобное округлённое значение расстояния, не превышающее заданную ширину.

Поведение при обновлении карты

Контрол пересчитывает значение шкалы при событиях:

  • изменение масштаба (zoom)
  • перемещение карты (move)
  • завершение анимации перемещения

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

Логика расчёта расстояний

Leaflet использует сферическую модель Земли. Расстояние между пикселями и метрами вычисляется с учётом:

  • текущей широты центра карты
  • уровня зума
  • разрешения тайлов

Приближённая зависимость:

  • на экваторе 1 пиксель соответствует большему расстоянию
  • ближе к полюсам масштаб визуально «сжимается»

Именно поэтому шкала всегда динамическая и не фиксированная.

Внутренняя структура элемента

После добавления на карту создаётся DOM-структура вида:

  • контейнер control-scale
  • блок metric-scale (при включённой метрической системе)
  • блок imperial-scale (при включённой имперской системе)
  • линии шкалы с подписью значений

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

Стилизация через CSS

Контрол использует стандартные классы Leaflet:

  • .leaflet-control-scale
  • .leaflet-control-scale-line

Пример изменения внешнего вида:

.leaflet-control-scale-line {
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid #444;
  color: #222;
  font-size: 12px;
  padding: 2px 5px;
}

Изменение стилей не влияет на вычисление масштаба, так как логика отделена от визуального слоя.

Поведение при разных зумах

При малом масштабе (приближённая карта):

  • шкала показывает короткие расстояния (10 м, 50 м, 100 м)

При среднем масштабе:

  • отображаются сотни метров или километры

При большом масштабе (отдалённый вид):

  • километры и десятки километров

Leaflet автоматически выбирает «красивые» значения из набора округлённых шагов: 1, 2, 5 × 10ⁿ.

Программное управление

Контрол можно добавлять и удалять динамически.

Добавление

const scale = L.control.scale();
scale.addTo(map);

Удаление

map.removeControl(scale);

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

Поведение при разных проекциях

Хотя Leaflet по умолчанию использует Web Mercator, масштабная линейка остаётся корректной в пределах этой проекции. При кастомных CRS поведение зависит от реализации системы координат:

  • линейные CRS дают более предсказуемый масштаб
  • нелинейные требуют дополнительных пересчётов

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

Контрол применяется в случаях, когда требуется:

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

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

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

Точность шкалы зависит от:

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

На практике шкала даёт достаточную приближённую оценку, но не предназначена для высокоточных геодезических расчётов.

Оглавление