Иконки и изображения

Визуальное представление объектов на карте в экосистеме HERE Technologies строится вокруг маркеров и их иконок. Базовая сущность — H.map.Marker, которая принимает географическую точку и визуальный стиль через объект H.map.Icon.

Иконка задаётся либо URL изображения, либо набором параметров, определяющих поведение рендеринга:

const icon = new H.map.Icon('marker.png', {
  size: { w: 32, h: 32 }
});

const marker = new H.map.Marker(
  { lat: 52.5, lng: 13.4 },
  { icon: icon }
);

map.addObject(marker);

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

Позиционирование и якорь иконки

Каждая иконка имеет точку привязки (anchor), определяющую, какой пиксель изображения соответствует координате на карте.

const icon = new H.map.Icon('marker.png', {
  anchor: { x: 16, y: 32 }
});

Если anchor не задан, используется нижний центральный край изображения. Это стандартное поведение для классических маркеров «капля».

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

Масштабирование и адаптация под DPI

Современные карты используют устройства с высокой плотностью пикселей. Для корректного отображения применяются два подхода:

  • предоставление изображений в двойном разрешении
  • использование CSS-подобного масштабирования через параметры иконки

Пример адаптации:

const icon = new H.map.Icon('marker@2x.png', {
  size: { w: 32, h: 32 }
});

Система рендеринга автоматически масштабирует изображение под текущий device pixel ratio при корректной подготовке ресурсов.

SVG-иконки и векторная графика

SVG обеспечивает масштабирование без потери качества и является предпочтительным форматом для динамических иконок.

const svgMarkup =
  '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">' +
  '<circle cx="12" cy="12" r="10" fill="red"/></svg>';

const icon = new H.map.Icon(svgMarkup);
const marker = new H.map.Marker({ lat: 52.5, lng: 13.4 }, { icon });
map.addObject(marker);

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

DOM-маркеры и кастомная верстка

Помимо растровых и векторных иконок применяется H.map.DomIcon, позволяющий использовать HTML-разметку как маркер.

const domIcon = new H.map.DomIcon('<div class="custom-marker"></div>');

const marker = new H.map.DomMarker(
  { lat: 52.5, lng: 13.4 },
  { icon: domIcon }
);

Такой подход открывает доступ к полноценным CSS-анимациям, теням, переходам и интерактивности внутри маркера.

Особенность DOM-маркеров — повышенная нагрузка на рендеринг при большом количестве объектов, что требует оптимизации через кластеризацию.

Кастомные состояния и динамическая смена иконок

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

marker.setIcon(new H.map.Icon('active.png'));

Это используется для отображения состояний:

  • выбранный объект
  • активный маршрут
  • предупреждения
  • динамические события

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

Использование изображений как слоёв

Помимо маркеров изображения могут использоваться как накладываемые объекты (H.map.Overlay), фиксированные в координатах карты.

const overlay = new H.map.Overlay(
  new H.geo.Rect(52.4, 13.3, 52.6, 13.5),
  '<img src="overlay.png" />'
);

map.addObject(overlay);

Такие изображения применяются для:

  • тепловых карт
  • пользовательских зон
  • рекламных или информационных слоёв
  • спутниковых аннотаций

Sprite-иконки и оптимизация загрузки

Для снижения числа HTTP-запросов применяется спрайтовая техника: несколько иконок объединяются в одно изображение.

const icon = new H.map.Icon('sprites.png', {
  subRect: { x: 0, y: 0, w: 32, h: 32 }
});

Преимущества:

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

Недостатком является необходимость точного управления координатами вырезки.

Иконки кластеров

При работе с большим количеством объектов используется кластеризация. Иконка кластера отображает агрегированное состояние группы точек.

const clusterIcon = new H.map.Icon('cluster.png');

const clusterMarker = new H.map.Marker(
  cluster.getPosition(),
  { icon: clusterIcon }
);

В реальных сценариях текст внутри иконки формируется динамически, отражая количество объектов в кластере. Это часто реализуется через DOM-иконки.

Интерактивные иконки и события

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

marker.addEventListener('tap', function () {
  console.log('Marker selected');
});

Иконки при этом остаются пассивным визуальным слоем, а интерактивность реализуется через сам объект маркера.

Управление слоями и z-index

Порядок отображения иконок определяется порядком добавления объектов и их свойством zIndex.

marker.setZIndex(10);

Это важно при наложении:

  • перекрывающихся маркеров
  • кластеров
  • DOM-элементов поверх растровых иконок

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

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

  • декодирование изображений
  • layout DOM-маркеров
  • перерисовка canvas/webgl слоя
  • обработка событий

Оптимизация достигается через:

  • кластеризацию
  • использование простых SVG
  • минимизацию DOM-маркеров
  • переиспользование иконок

Системы визуализации HERE Maps API for JavaScript используют аппаратное ускорение для работы с большим числом объектов, однако эффективность напрямую зависит от выбора типа иконок.

Стилизация через динамические параметры

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

Пример генерации SVG с параметрами:

function createIcon(color) {
  return new H.map.Icon(
    `<svg width="24" height="24">
       <rect width="24" height="24" fill="${color}"/>
     </svg>`
  );
}

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

Комбинирование иконок и подписей

Часто маркер включает иконку и текстовую подпись, реализуемую через DOM:

const domIcon = new H.map.DomIcon(
  '<div class="marker">' +
  '<div class="icon"></div>' +
  '<div class="label">A</div>' +
  '</div>'
);

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

Оглавление