Центрирование и позиционирование

В основе работы с картой в HERE Maps API лежит географическая система координат WGS84, где каждая точка определяется парой значений: широта (latitude) и долгота (longitude).

Ключевой момент:

  • широта изменяется по оси север–юг
  • долгота — по оси запад–восток
  • порядок всегда фиксирован: (lat, lng)

Любые операции центрирования и позиционирования сводятся к преобразованию этих геокоординат в экранные координаты и обратно.

Базовое центрирование карты

Центр карты определяет точку, которая отображается в середине viewport. В HERE Maps API это одна из фундаментальных настроек карты.

Установка центра при инициализации

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
  }
);

Здесь:

  • center задаёт начальную точку
  • zoom определяет масштаб отображения

Динамическое изменение центра

После создания карты центр можно изменять в любой момент:

map.setCenter({ lat: 55.7558, lng: 37.6173 });

Метод setCenter:

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

Плавное перемещение карты (animation)

Для плавного перемещения используется параметр animation:

map.setCenter(
  { lat: 40.7128, lng: -74.0060 },
  true
);

Или через расширенный API камеры:

map.getViewModel().setLookAtData({
  position: { lat: 40.7128, lng: -74.0060 },
  zoom: 12
}, true);

Здесь true включает анимацию перехода.

Масштаб и его влияние на позиционирование

Центр всегда связан с масштабом:

map.setZoom(14);

Поведение:

  • высокий zoom → меньшая область, больше деталей
  • низкий zoom → глобальный обзор

Комбинация:

map.setViewBounds(bounds);

Позиционирование через границы (bounding box)

Часто вместо центра задаётся область отображения.

const bounds = new H.geo.Rect(
  55.85, 37.35,   // северо-запад
  55.55, 37.85    // юго-восток
);

map.getViewModel().setLookAtData({
  bounds: bounds
}, true);

Этот подход автоматически:

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

fitBounds и автоматическое центрирование

Метод fitBounds обеспечивает адаптивное позиционирование:

map.getViewModel().setLookAtData({
  bounds: markersGroup.getBoundingBox()
}, true);

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

  • групп маркеров
  • маршрутов
  • пользовательских слоёв

Геолокация пользователя и центрирование по текущему положению

Для позиционирования по GPS:

navigator.geolocation.getCurrentPosition((position) => {
  const coords = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };

  map.setCenter(coords);
  map.setZoom(14);
});

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

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

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

Внутри HERE Maps API существует два пространства:

  • географическое (lat/lng)
  • экранное (x/y пиксели)

Гео → экран

const point = map.geoToScreen({ lat: 48.8566, lng: 2.3522 });

Экран → гео

const geo = map.screenToGeo(100, 200);

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

  • кастомных оверлеев
  • обработчиков кликов
  • UI-аннотаций

Центрирование по событиям карты

Карта предоставляет события взаимодействия:

map.addEventListener('tap', function (evt) {
  const coord = map.screenToGeo(
    evt.currentPointer.viewportX,
    evt.currentPointer.viewportY
  );

  map.setCenter(coord);
});

Применения:

  • выбор точки пользователем
  • интерактивные сценарии
  • построение маршрутов

Ограничение области перемещения (clamping bounds)

Для контроля навигации используется ограничение границ:

map.getViewModel().setLookAtData({
  bounds: new H.geo.Rect(60, 30, 40, 10)
});

Дополнительно можно ограничить панорамирование:

map.setRestriction(bounds);

Поведение:

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

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

При ресайзе контейнера карта требует пересчёта:

window.addEventListener('resize', () => {
  map.getViewPort().resize();
});

Если этого не сделать:

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

Камера и модель вида (ViewModel)

Современный подход в HERE Maps API основан на абстракции камеры:

const viewModel = map.getViewModel();

viewModel.setLookAtData({
  position: { lat: 48.8566, lng: 2.3522 },
  zoom: 13,
  tilt: 45,
  heading: 90
});

Параметры:

  • position — центр
  • zoom — масштаб
  • tilt — наклон камеры
  • heading — поворот

Анимация переходов между точками

Плавные переходы улучшают восприятие навигации:

map.getViewModel().setLookAtData({
  position: { lat: 52.52, lng: 13.405 },
  zoom: 11
}, true);

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

  • переходе между городами
  • следовании за объектом
  • обновлении маршрута

Следование за объектом (tracking)

Для динамических объектов:

function updatePosition(lat, lng) {
  map.getViewModel().setLookAtData({
    position: { lat, lng },
    zoom: map.getZoom()
  }, true);
}

Типичные сценарии:

  • транспорт
  • курьеры
  • пользователь в движении

Смещение центра (offset positioning)

Иногда центр смещают относительно геометрического центра экрана:

map.getViewModel().setLookAtData({
  position: { lat: 48.8566, lng: 2.3522 },
  zoom: 12,
  padding: { top: 100, left: 0, bottom: 0, right: 0 }
});

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

  • размещения UI-панелей
  • подсветки объектов под всплывающими окнами

Работа с несколькими слоями и их влияние на центр

Разные слои карты не влияют напрямую на центр, но влияют на восприятие позиции:

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

Типичные ошибки позиционирования

  • использование lng/lat в неправильном порядке
  • отсутствие viewport.resize() при изменении контейнера
  • смешивание screen- и geo-координат без преобразования
  • установка центра без учета текущего zoom
  • игнорирование анимации при частых обновлениях позиции

Эти ошибки приводят к визуальным смещениям и нестабильному поведению интерфейса.

Оглавление