Стилизация геометрии

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

В HERE Maps API геометрические объекты представлены классами:

  • H.map.Marker
  • H.map.Polyline
  • H.map.Polygon

Каждый объект поддерживает назначение стиля через объект H.map.Style или через inline-описание параметров.

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

  • Геометрия — координаты и форма
  • Стиль — визуальное отображение (цвет, толщина, заливка, прозрачность)

Стилизация линий (Polyline)

Линии используются для отображения маршрутов, границ и трасс.

Основные параметры стиля:

  • strokeColor — цвет линии
  • lineWidth — толщина
  • lineDash — пунктир
  • lineCap — форма концов линии
  • lineJoin — способ соединения сегментов

Пример создания и стилизации линии:

const lineString = new H.geo.LineString();

lineString.pushPoint({ lat: 52.5, lng: 13.4 });
lineString.pushPoint({ lat: 52.51, lng: 13.41 });
lineString.pushPoint({ lat: 52.52, lng: 13.42 });

const polyline = new H.map.Polyline(lineString, {
  style: {
    strokeColor: 'rgba(0, 128, 255, 0.7)',
    lineWidth: 6,
    lineDash: [2, 6],
    lineJoin: 'round'
  }
});

map.addObject(polyline);

Динамическая стилизация линий

Стили можно изменять во время выполнения:

polyline.setStyle({
  strokeColor: '#ff0000',
  lineWidth: 8
});

Это позволяет реализовать:

  • подсветку маршрута
  • индикацию состояния (активный / неактивный)
  • визуализацию скорости или нагрузки

Стилизация полигонов (Polygon)

Полигоны применяются для зон, областей, территорий и аналитических слоёв.

Основные параметры:

  • fillColor — заливка
  • strokeColor — обводка
  • lineWidth — толщина границы
  • lineDash — стиль границы

Пример:

const polygon = new H.map.Polygon(lineString, {
  style: {
    fillColor: 'rgba(255, 0, 0, 0.3)',
    strokeColor: '#ff0000',
    lineWidth: 2
  }
});

map.addObject(polygon);

Прозрачность и наложение слоёв

Использование RGBA позволяет управлять визуальной иерархией:

fillColor: 'rgba(0, 200, 0, 0.2)'

Ключевые принципы:

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

Управление порядком отображения (z-index)

Параметр zIndex определяет приоритет отрисовки:

polyline.setZIndex(2);
polygon.setZIndex(1);

Правила:

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

Стиль маркеров и точечных объектов

Хотя маркеры не являются геометрией в строгом смысле, их стилизация тесно связана с геометрическими объектами.

Варианты:

  • SVG-иконки
  • HTML-элементы
  • растровые изображения

Пример SVG-маркера:

const icon = new H.map.Icon('<svg>...</svg>');

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

map.addObject(marker);

Контекстно-зависимая стилизация

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

Пример логики:

map.addEventListener('mapviewchange', () => {
  const zoom = map.getZoom();

  polyline.setStyle({
    lineWidth: zoom > 10 ? 8 : 3
  });
});

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

  • адаптации плотности линий
  • изменения детализации
  • улучшения читаемости на разных масштабах

Использование тем (Theming)

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

Структура темы включает:

  • правила для слоёв карты
  • стили по типам объектов
  • фильтры по zoom level

Пример концепции:

const style = new H.map.Style('styles/traffic-theme.yaml');
const provider = map.getBaseLayer().getProvider();
provider.setStyle(style);

Темы позволяют централизованно управлять:

  • дорогами
  • водоёмами
  • административными границами
  • транспортными слоями

Стилизация на основе данных

Геометрии могут менять внешний вид в зависимости от атрибутов данных.

Пример логики:

function getColor(speed) {
  if (speed > 80) return 'green';
  if (speed > 40) return 'orange';
  return 'red';
}

polyline.setStyle({
  strokeColor: getColor(trafficSpeed)
});

Такой подход применяется в:

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

Интерактивная стилизация

Стили часто изменяются по событиям:

  • hover
  • click
  • drag

Пример:

polyline.addEventListener('pointerenter', () => {
  polyline.setStyle({
    strokeColor: '#00ffcc',
    lineWidth: 10
  });
});

polyline.addEventListener('pointerleave', () => {
  polyline.setStyle({
    strokeColor: '#0080ff',
    lineWidth: 6
  });
});

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

  • подсветки объектов
  • UX-навигации
  • интерактивных карт

Комбинирование нескольких стилей

Один объект может иметь сложную композицию стилей:

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

Пример:

const outer = new H.map.Polyline(lineString, {
  style: {
    strokeColor: '#000',
    lineWidth: 10
  }
});

const inner = new H.map.Polyline(lineString, {
  style: {
    strokeColor: '#00f',
    lineWidth: 6
  }
});

map.addObjects([outer, inner]);

Производительность при сложной стилизации

При большом количестве объектов важно учитывать:

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

Оптимальные практики:

  • группировка объектов
  • кэширование стилей
  • применение стилевых функций вместо инстансных изменений

Ограничения стилизации

Некоторые ограничения характерны для векторной модели:

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

Тем не менее, базового набора параметров достаточно для:

  • навигационных систем
  • GIS-приложений
  • аналитических панелей
Оглавление