Заливка и обводка

Работа с графическими объектами на карте в HERE Maps JavaScript API опирается на систему стилизации геометрии, где ключевую роль играют параметры заливки (fill) и обводки (stroke). Эти параметры определяют визуальное представление полигонов, линий и связанных пространственных объектов, формируя читаемую и информативную карту.

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

Для большинства пространственных объектов используются следующие категории параметров:

  • fillColor — цвет заливки полигона
  • strokeColor — цвет обводки
  • lineWidth — толщина линии
  • lineDash — пунктирная линия
  • opacity — прозрачность

Эти параметры применяются к объектам H.map.Polygon, H.map.Polyline и производным типам.

Заливка полигонов

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

Базовая заливка

При создании полигона стиль задаётся через объект H.map.Polygon.Style или через H.map.Polygon с параметрами стиля.

Пример логики конфигурации:

const polygon = new H.map.Polygon(geometry, {
  style: {
    fillColor: 'rgba(0, 128, 255, 0.4)'
  }
});

Заливка определяется цветом с поддержкой прозрачности. Использование RGBA является предпочтительным, поскольку позволяет сохранять читаемость карты при наложении нескольких объектов.

Поведение прозрачности

Прозрачность влияет на восприятие слоёв карты. Значение альфа-канала:

  • 0.0 — полностью прозрачный объект
  • 1.0 — полностью непрозрачный объект

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

Градиенты и условная заливка

В стандартном API отсутствует встроенная поддержка CSS-градиентов, однако визуальные эффекты достигаются через:

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

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

  • высокая плотность данных → насыщенный цвет
  • низкая плотность → светлый оттенок

Таким образом создаётся псевдо-градиентная карта.

Обводка полигонов

Обводка используется для выделения границ геометрических объектов. В HERE Maps API она задаётся через strokeColor, lineWidth и дополнительные параметры.

Базовая обводка

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

Обводка выполняет две функции:

  • визуальное отделение объекта от фона
  • подчёркивание границ при перекрытии объектов

Толщина линии

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

  • 1–2 px — тонкие технические границы
  • 3–5 px — стандартные административные границы
  • 6+ px — акцентированные зоны

Чрезмерная толщина может визуально «ломать» геометрию, особенно при масштабировании карты.

Пунктирная обводка

Для создания пунктирных линий используется lineDash:

style: {
  strokeColor: '#ff0000',
  lineWidth: 2,
  lineDash: [4, 4]
}

Массив определяет последовательность:

  • первое значение — длина штриха
  • второе — длина пробела

Комбинации позволяют формировать различные типы визуальных обозначений:

  • [1, 3] — мелкий пунктир
  • [10, 5] — крупный технический контур

Комбинированная заливка и обводка

Наиболее распространённый сценарий — одновременное использование заливки и обводки. Это позволяет одновременно выделять область и её границу.

const polygon = new H.map.Polygon(geometry, {
  style: {
    fillColor: 'rgba(255, 165, 0, 0.25)',
    strokeColor: 'rgba(255, 140, 0, 1)',
    lineWidth: 3
  }
});

Такая комбинация используется для:

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

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

HERE Maps API позволяет изменять стиль объекта после его создания. Это используется для интерактивных карт, где поведение зависит от событий.

polygon.setStyle({
  fillColor: 'rgba(0, 200, 0, 0.4)',
  strokeColor: '#006600',
  lineWidth: 2
});

Типовые сценарии:

  • наведение курсора
  • выбор объекта
  • изменение состояния данных
  • фильтрация слоёв

Стилизация через данные

При работе с большими наборами геометрий стиль часто определяется программно на основе свойств объекта.

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

  • население региона → цвет заливки
  • уровень риска → интенсивность обводки
  • категория объекта → толщина линии
function getStyleByValue(value) {
  return {
    fillColor: value > 80 ? 'rgba(255,0,0,0.4)' : 'rgba(0,0,255,0.3)',
    strokeColor: value > 80 ? '#990000' : '#003399',
    lineWidth: 2
  };
}

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

Обводка линий (Polyline)

Линии в HERE Maps API представлены объектом H.map.Polyline. Для них применяется только обводка, без заливки.

const polyline = new H.map.Polyline(lineString, {
  style: {
    strokeColor: '#0000ff',
    lineWidth: 4
  }
});

Визуальные особенности линий

Обводка линии должна учитывать масштаб карты:

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

Для этого часто используется адаптивное изменение lineWidth в зависимости от уровня зума.

Адаптация стилей под масштаб

Динамическая стилизация под zoom level позволяет сохранять читаемость карты.

Пример подхода:

  • zoom < 8 → тонкие линии, слабая заливка
  • zoom 8–12 → стандартные значения
  • zoom > 12 → усиленные границы и насыщенные цвета

Реализация:

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

  polygon.setStyle({
    fillColor: zoom > 10 ? 'rgba(0,128,255,0.4)' : 'rgba(0,128,255,0.2)',
    strokeColor: '#003366',
    lineWidth: zoom > 10 ? 3 : 1
  });
});

Взаимодействие заливки и обводки с производительностью

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

Ключевые факторы:

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

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

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

Использование прозрачности в слоях

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

Рекомендации логики:

  • фоновые слои: 0.1–0.2
  • аналитические слои: 0.3–0.5
  • активные объекты: 0.6–0.8

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

Стили через SpatialStyle

В более сложных сценариях используется H.map.SpatialStyle, позволяющий централизованно задавать параметры отображения.

const style = new H.map.SpatialStyle({
  fillColor: 'rgba(100, 100, 255, 0.3)',
  strokeColor: '#222222',
  lineWidth: 2
});

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

Согласованность визуального языка

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

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

Такая система снижает когнитивную нагрузку и повышает читаемость пространственных данных.

Оглавление