Индикатор масштаба

Назначение и роль в картографическом интерфейсе

Индикатор масштаба представляет собой интерфейсный элемент, отображающий соотношение расстояния на экране к реальному расстоянию на местности. В экосистеме картографических сервисов HERE Technologies он используется как стандартный компонент для повышения интерпретируемости пространственных данных.

Основная задача масштабной линейки — синхронизация визуального масштаба карты с текущим уровнем zoom. При изменении масштаба карты индикатор автоматически пересчитывает длину отрезка и обновляет подпись в метрических или имперских единицах.

Место Scale Bar в архитектуре HERE Maps JavaScript API

В JavaScript API индикатор масштаба реализован как UI-компонент, входящий в подсистему H.ui. Он интегрируется с объектом карты и реагирует на события изменения масштаба, центра и проекции.

Ключевые элементы архитектуры:

  • H.Map — основной объект карты
  • H.ui.UI — контейнер пользовательского интерфейса
  • H.ui.ScaleBar — компонент отображения масштаба
  • H.mapevents — система обработки взаимодействий

ScaleBar не работает автономно; он подписывается на изменения состояния карты и обновляет своё состояние синхронно с render loop.

Базовая инициализация индикатора масштаба

Добавление индикатора масштаба выполняется после создания карты и UI-слоя.

// Инициализация платформы
const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

// Получение базовых слоёв
const defaultLayers = platform.createDefaultLayers();

// Создание карты
const map = new H.Map(
  document.getElementById('map'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 48.8566, lng: 2.3522 },
    zoom: 10,
    pixelRatio: window.devicePixelRatio || 1
  }
);

// Добавление поведения (pan/zoom)
const beh * avior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Создание UI
const ui = H.ui.UI.createDefault(map, defaultLayers);

// Добавление индикатора масштаба
const scaleBar = ui.addControl('scalebar');

В данном случае строка ui.addControl('scalebar') подключает стандартную реализацию индикатора масштаба, встроенную в UI-фреймворк.

Внутренний механизм обновления масштаба

ScaleBar использует преобразование координат карты в экранные пиксели. При каждом изменении zoom вычисляется масштабный коэффициент:

  • проекция WGS84 → экранная плоскость
  • вычисление расстояния между двумя точками в пикселях
  • пересчёт реального расстояния в метрах или километрах

Фактически применяется обратная зависимость:

  • увеличение zoom → уменьшение отображаемой географической области
  • уменьшение zoom → увеличение отображаемой области

ScaleBar получает данные напрямую из состояния H.Map, без необходимости ручного обновления.

Расположение и позиционирование

Индикатор масштаба является UI-элементом с фиксированным позиционированием относительно контейнера карты.

Типовые варианты размещения:

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

Пример изменения позиции через конфигурацию UI:

const ui = H.ui.UI.createDefault(map, defaultLayers, 'ru-RU');

const scaleBar = new H.ui.ScaleBar({
  alignment: H.ui.LayoutAlignment.BOTTOM_RIGHT
});

ui.addControl('scalebar', scaleBar);

Единицы измерения и локализация

ScaleBar поддерживает динамическое переключение единиц измерения:

  • метрическая система (метры, километры)
  • имперская система (футы, мили)

Выбор системы измерений может зависеть от:

  • локали интерфейса
  • параметров UI
  • региональных настроек платформы

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

Связь с zoom level и масштабной шкалой

Масштаб в HERE Maps API не является линейной величиной. Он зависит от:

  • широты центра карты (из-за проекции Mercator)
  • текущего zoom level
  • плотности пикселей устройства

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

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

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

Основные параметры кастомизации:

  • цвет фона
  • цвет линии шкалы
  • тип шрифта
  • размер подписи
  • отступы и рамки

Пример CSS-ориентированной настройки:

.h-ui-scalebar {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

Интеграция с событиями карты

ScaleBar может использовать события карты для синхронизации:

  • mapviewchange — изменение центра или zoom
  • resize — изменение размеров контейнера
  • baselayerchange — смена слоя карты

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

Поведение при изменении размера контейнера

При изменении размеров DOM-элемента карты происходит перерасчёт пиксельной плотности отображения. ScaleBar автоматически адаптируется к новым условиям:

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

Это особенно важно при использовании адаптивных интерфейсов и мобильных устройств.

Особенности работы в векторных и растровых слоях

В HERE Maps API масштабная линейка не зависит от типа слоя напрямую, однако визуальная точность восприятия может различаться:

  • векторные слои обеспечивают более стабильное масштабирование
  • растровые слои могут демонстрировать визуальные артефакты при резком zoom

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

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

Существуют особенности, которые следует учитывать:

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

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

Оглавление