ScaleControl

ScaleControl в Mapbox GL JS представляет собой встроенный элемент управления, предназначенный для отображения линейного масштаба карты. Этот компонент помогает интерпретировать расстояния на экране в реальных единицах измерения и автоматически обновляется при изменении масштаба, центра карты или проекции.

ScaleControl отображает динамическую шкалу, которая визуально показывает, какому расстоянию на местности соответствует определённая длина на экране. При изменении уровня зума масштабная линейка пересчитывается, подстраиваясь под текущую географическую область.

Внутренне контроль опирается на текущую проекцию карты и вычисляет оптимальную длину шкалы таким образом, чтобы она оставалась «читаемой» — обычно это круговые значения вроде 100 м, 500 м, 1 км, 5 км.

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

Подключение ScaleControl к карте

Добавление масштабной линейки выполняется через метод addControl объекта карты.

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'YOUR_MAPBOX_TOKEN';

const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [37.6173, 55.7558],
  zoom: 10
});

map.addControl(new mapboxgl.ScaleControl(), 'bottom-left');

В данном примере ScaleControl добавляется в левый нижний угол карты. Позиция задаётся вторым аргументом метода addControl.

Конфигурация и параметры

ScaleControl принимает объект настроек, позволяющий управлять внешним видом и единицами измерения.

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

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

unit Задаёт систему единиц измерения:

  • metric — метры и километры
  • imperial — футы и мили
  • nautical — морские мили

Пример конфигурации:

const scale = new mapboxgl.ScaleControl({
  maxWidth: 120,
  unit: 'metric'
});

map.addControl(scale, 'bottom-right');

При выборе imperial отображение будет автоматически переключаться на футы и мили, что актуально для интерфейсов, ориентированных на США и Великобританию.

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

Масштабная линейка не является статичным элементом. Она реагирует на:

  • изменение zoom уровня
  • перемещение карты
  • изменение угла наклона (pitch)
  • изменение направления (bearing)

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

Алгоритм подбирает «красивые» значения длины, избегая дробных и неудобных чисел, используя округления до стандартных географических шагов.

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

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

const scaleControl = new mapboxgl.ScaleControl({
  maxWidth: 150,
  unit: 'metric'
});

map.addControl(scaleControl);

// удаление при необходимости
map.removeControl(scaleControl);

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

Расположение на карте

ScaleControl поддерживает стандартные позиции UI-элементов Mapbox GL JS:

  • top-left
  • top-right
  • bottom-left
  • bottom-right

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

map.addControl(new mapboxgl.ScaleControl(), 'top-left');

Стилизация и интеграция в интерфейс

ScaleControl рендерится как DOM-элемент с CSS-классом mapboxgl-ctrl-scale. Это позволяет адаптировать его внешний вид под дизайн приложения.

Пример кастомизации:

.mapboxgl-ctrl-scale {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-color: #fff;
  font-size: 11px;
}

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

Работа с различными единицами измерения

Выбор единиц влияет не только на отображаемые подписи, но и на внутреннюю логику пересчёта:

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

Переключение единиц может происходить динамически:

scaleControl.setUnit('imperial');

Это позволяет адаптировать интерфейс под регион пользователя без пересоздания карты.

Взаимодействие с плотностью пикселей и устройствами

ScaleControl учитывает devicePixelRatio, что особенно важно на Retina-дисплеях и мобильных устройствах. Расчёты выполняются в географических координатах, после чего результат проецируется в экранные пиксели.

Это обеспечивает корректное отображение масштаба независимо от плотности экрана.

Ограничения и особенности реализации

Несмотря на простоту, ScaleControl имеет ряд особенностей:

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

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

Применение в интерфейсах картографических приложений

ScaleControl часто используется в сочетании с другими элементами управления:

  • ZoomControl — управление масштабом
  • NavigationControl — вращение и наклон карты
  • AttributionControl — информация об источниках данных

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

map.addControl(new mapboxgl.NavigationControl(), 'top-right');
map.addControl(new mapboxgl.ScaleControl({
  maxWidth: 100,
  unit: 'metric'
}), 'bottom-left');

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

Оглавление