Map Attributes

В HERE Maps JavaScript API конфигурация карты определяется набором атрибутов, которые задаются при создании экземпляра H.Map и управляют поведением, визуализацией и ограничениями отображения. Эти параметры формируют базовую модель карты и влияют на то, как движок рендеринга интерпретирует геоданные и взаимодействие пользователя с картой.

Карта строится на основе объекта H.Map, которому передаётся контейнер, объект карты-поведения (H.mapevents.MapEvents), а также набор параметров, определяющих начальное состояние и свойства отображения.

Базовые атрибуты и инициализация карты

center

Атрибут center задаёт географический центр карты при инициализации. Значение передаётся в формате широты и долготы:

center: { lat: 49.9935, lng: 36.2304 }

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

  • определяет стартовую позицию камеры
  • используется как точка фокусировки при отсутствии bounds
  • может быть изменён динамически через map.setCenter()

zoom

Параметр zoom управляет уровнем приближения карты. В HERE Maps используется дискретно-непрерывная шкала масштабирования.

zoom: 10

Характеристики:

  • низкие значения (2–5) отображают континенты
  • средние (10–13) показывают города и районы
  • высокие (15–20) применяются для детализированного просмотра улиц и объектов
  • допускаются дробные значения (например, 10.5)

pixelRatio

Атрибут pixelRatio определяет плотность пикселей, используемую для рендеринга.

pixelRatio: window.devicePixelRatio

Значение влияет на:

  • чёткость отображения на Retina и HiDPI дисплеях
  • производительность рендеринга при высоких значениях
  • размер загружаемых тайлов и текстур

engineType

HERE Maps поддерживает несколько движков рендеринга, выбор которых задаётся через engineType.

engineType: H.Map.EngineType.HARP

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

  • HARP — современный WebGL-движок с поддержкой 3D
  • DEFAULT — классический рендеринг (в зависимости от версии API)

Выбор движка влияет на:

  • поддержку наклона и вращения
  • качество отрисовки слоёв
  • использование аппаратного ускорения

Атрибуты отображения камеры

tilt

tilt задаёт угол наклона камеры относительно поверхности земли.

tilt: 45

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

  • измеряется в градусах (0–60+ в зависимости от движка)
  • 0° — строго сверху (ортографический вид)
  • увеличенные значения создают перспективный 3D-эффект

Используется только в WebGL-рендерерах (например, HARP).

bearing

Атрибут bearing отвечает за поворот карты вокруг вертикальной оси.

bearing: 90

Характеристики:

  • 0° — север вверх
  • 90° — восток вверх
  • 180° — юг вверх
  • 270° — запад вверх

Изменение bearing влияет только на ориентацию, не изменяя центр или масштаб.

bounds

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

bounds: new H.geo.Rect(50.1, 36.1, 49.8, 36.5)

Используется для:

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

padding

Параметр padding определяет внутренние отступы карты от контейнера.

padding: { top: 50, right: 50, bottom: 50, left: 50 }

Назначение:

  • смещение центра отображения при наличии UI-элементов
  • корректное позиционирование объектов относительно видимой области
  • предотвращение перекрытия маркеров интерфейсом

Атрибуты визуального оформления

style

В HERE Maps стиль карты задаётся через базовый слой или тему.

style: 'default'

или через конфигурацию слоя:

baseLayer: platform.createDefaultLayers().vector.normal.map

Влияние:

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

backgroundColor

Атрибут backgroundColor задаёт цвет фона карты до загрузки тайлов.

backgroundColor: '#ffffff'

Применяется:

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

baseLayer

baseLayer определяет основной слой карты.

baseLayer: platform.createDefaultLayers().raster.normal.map

Типы слоёв:

  • raster — растровые тайлы
  • vector — векторные тайлы с динамическим рендерингом
  • hybrid — комбинированные режимы (карта + спутник)

Атрибуты управления взаимодействием

interactive

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

interactive: true

При значении false отключаются:

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

pixelRatio и обработка событий

Хотя pixelRatio относится к рендерингу, он косвенно влияет на обработку событий:

  • корректировка координат кликов
  • точность hit-testing для маркеров
  • синхронизация координат экрана и карты

Ограничения и контроль области карты

minZoom и maxZoom

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

minZoom: 3,
maxZoom: 18

Используются для:

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

restriction

Параметр ограничения перемещения карты.

restriction: {
  bounds: new H.geo.Rect(55, 30, 45, 40)
}

Функциональность:

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

Производительные атрибуты

renderMode

Определяет режим рендеринга карты.

renderMode: H.Map.RenderMode.VECTOR

Режимы:

  • VECTOR — векторная отрисовка в реальном времени
  • RASTER — предварительно отрисованные тайлы

Векторный режим обеспечивает:

  • динамическое изменение стилей
  • плавное масштабирование
  • поддержку 3D эффектов

usePixelRatio

Дополнительный контроль использования плотности пикселей.

usePixelRatio: true

Влияет на:

  • качество графики
  • нагрузку на GPU
  • размер загружаемых ресурсов

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

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: 49.9935, lng: 36.2304 },
    zoom: 11,
    pixelRatio: window.devicePixelRatio,
    engineType: H.Map.EngineType.HARP,
    tilt: 30,
    bearing: 0,
    padding: { top: 60, right: 20, bottom: 20, left: 20 },
    backgroundColor: '#eaeaea',
    minZoom: 4,
    maxZoom: 19,
    restriction: {
      bounds: new H.geo.Rect(55, 30, 45, 40)
    }
  }
);

Динамическое изменение атрибутов

После создания карты большинство атрибутов можно изменять через API методов объекта H.Map:

  • setCenter()
  • setZoom()
  • setBearing()
  • setTilt()
  • setViewBounds()

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

Взаимосвязь атрибутов

Атрибуты карты образуют взаимозависимую систему:

  • center, zoom, bearing и tilt формируют камеру
  • bounds, minZoom, maxZoom ограничивают её поведение
  • baseLayer и engineType определяют способ визуализации
  • padding влияет на интерпретацию геометрии в пределах экрана

Изменение одного параметра может приводить к перерасчёту других, особенно при использовании автоматического fitting bounds или адаптивного масштабирования.

Оглавление