Переключатель типов карт

В JavaScript API платформы HERE Technologies карта представляет собой композицию слоёв, где основным является базовый слой (base layer), определяющий визуальный тип отображения географических данных. Переключение типов карт в данном контексте означает замену или подмену базового слоя без разрушения состояния карты, включая координаты центра, масштаб и добавленные поверх пользовательские объекты.

В основе клиентской библиотеки HERE Maps API лежит объект H.Map, который управляет рендерингом сцены и взаимодействием с картографическими слоями. Тип карты не является свойством самой карты как объекта, а задаётся через конфигурацию слоя тайлов, чаще всего через H.map.layer.TileLayer.

Базовые типы карт и их представление

В большинстве конфигураций HERE JS API используются следующие типы карт:

  • стандартная карта (normal / base)
  • спутниковая карта (satellite)
  • гибридная карта (hybrid)
  • рельефная карта (terrain)
  • транспортная и дорожная карта с акцентом на трафик

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

Ключевым моментом является то, что переключение типов карт — это операция замены H.map.layer.TileLayer, а не изменение параметра внутри существующего слоя.

Создание базовой карты и инициализация слоя

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

Основные сущности:

  • H.service.Platform — доступ к сервисам
  • platform.createDefaultLayers() — стандартный набор слоёв
  • H.Map — объект карты

Пример логики создания:

const platform = new H.service.Platform({
  apikey: 'YOUR_API_KEY'
});

const defaultLayers = platform.createDefaultLayers();

const map = new H.Map(
  document.getElementById('mapContainer'),
  defaultLayers.vector.normal.map,
  {
    center: { lat: 52.52, lng: 13.405 },
    zoom: 10
  }
);

В этом случае defaultLayers.vector.normal.map задаёт базовый тип отображения.

Принцип переключения типов карт

Переключение выполняется через замену слоя:

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

Карта не пересоздаётся, что обеспечивает плавность переключения.

Пример логики переключения

function setMapType(map, newLayer) {
  const layers = map.getLayers();

  layers.remove(layers.get(0));
  layers.addLayer(newLayer);
}

Однако на практике чаще используется прямое управление базовым слоем через map.setBaseLayer():

map.setBaseLayer(defaultLayers.vector.satellite.map);

Векторные и растровые типы карт

В современной реализации HERE Maps API выделяются два основных подхода:

Векторные карты

Векторные слои (vector) представляют географические данные в виде геометрии, которая отрисовывается на клиенте. Это обеспечивает:

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

Пример базового слоя:

defaultLayers.vector.normal.map

Растровые карты

Растровые слои (raster) предоставляют готовые изображения тайлов. Их особенности:

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

Пример:

defaultLayers.raster.satellite.map

Переключение между нормальной и спутниковой картой

Наиболее распространённый сценарий — переключение между стандартным и спутниковым режимом.

const normalMap = defaultLayers.vector.normal.map;
const satelliteMap = defaultLayers.raster.satellite.map;

map.setBaseLayer(normalMap);

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

Гибридный режим как комбинация слоёв

Гибридная карта реализуется как наложение спутникового слоя и векторной информации (дороги, подписи).

defaultLayers.raster.hybrid.map

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

Управление слоями через объект Map

Объект H.Map предоставляет методы управления слоями:

  • setBaseLayer(layer)
  • addLayer(layer)
  • removeLayer(layer)
  • getLayers()

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

Пример добавления дополнительного слоя поверх базового:

map.addLayer(defaultLayers.vector.traffic.map);

Переключатель типов карт в пользовательском интерфейсе

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

const mapTypes = {
  normal: defaultLayers.vector.normal.map,
  satellite: defaultLayers.raster.satellite.map,
  terrain: defaultLayers.raster.terrain.map,
  hybrid: defaultLayers.raster.hybrid.map
};

function switchType(type) {
  map.setBaseLayer(mapTypes[type]);
}

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

При переключении базового слоя сохраняются:

  • центр карты
  • уровень масштабирования
  • все пользовательские объекты (markers, polylines, polygons)
  • события взаимодействия

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

Производительность при частом переключении

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

В высоконагруженных интерфейсах предпочтительно:

  • заранее инициализировать все используемые слои
  • кэшировать ссылки на TileLayer
  • избегать повторного создания Platform

Состояние слоя и внутренние зависимости

Каждый слой в HERE Maps API связан с сервисом тайлов через H.service.MapTileService. При переключении типов карт происходит переназначение источника данных без изменения объекта карты.

Это обеспечивает:

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

Расширенные сценарии переключения

В сложных приложениях переключение типов карт может зависеть от:

  • уровня зума (автосмена satellite ↔︎ vector)
  • режима отображения (логистика, транспорт, аналитика)
  • пользовательских предпочтений
  • времени суток (day/night styles в vector слоях)

Пример условного переключения:

map.addEventListener('mapviewchangeend', function () {
  const zoom = map.getZoom();

  if (zoom > 15) {
    map.setBaseLayer(defaultLayers.raster.satellite.map);
  } else {
    map.setBaseLayer(defaultLayers.vector.normal.map);
  }
});

Структурная роль базового слоя

Базовый слой определяет:

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

Все остальные элементы карты рассматриваются как наложения (overlays), которые не влияют на тип карты, но зависят от него визуально.

Интеграция с сервисами трафика и маршрутизации

При переключении типов карт часто параллельно используется слой трафика:

map.addLayer(defaultLayers.vector.traffic.map);

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

Итоговая модель поведения переключателя

Переключатель типов карт в архитектуре HERE Maps API представляет собой слой абстракции, который:

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

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

Оглавление