Тематические карты

HERE Technologies предоставляет через HERE Maps API набор инструментов для построения тематических карт (thematic maps), позволяющих визуализировать пространственные данные с привязкой к географии и смысловым слоям. Тематические карты используются для отображения плотности явлений, категориальных распределений, агрегированных показателей и пользовательских данных поверх базовой картографической подложки.

Архитектура тематических слоёв

Тематическая карта в HERE Maps строится на принципе многослойной композиции:

  • Базовый слой (Base Layer) — подложка карты: улицы, спутник, гибрид
  • Тематический слой (Theme Layer) — визуализация данных
  • Слой взаимодействия (Interaction Layer) — обработка событий
  • Данные (Data Layer) — GeoJSON, CSV, REST-источники, тайлы

Ключевой объект — H.map.Layer, который может содержать кастомную отрисовку или подключение тайлового сервиса.

Подключение карты и базовой конфигурации

Инициализация карты в JavaScript API HERE:

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: 50.4501, lng: 30.5234 },
    zoom: 10,
    pixelRatio: window.devicePixelRatio || 1
  }
);

const beh * avior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
const ui = H.ui.UI.createDefault(map, defaultLayers);

На этом этапе карта готова к наложению тематических данных.

GeoJSON как основа тематических данных

Наиболее распространённый формат — GeoJSON. Он позволяет описывать геометрии и свойства объектов.

const geojson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [30.5234, 50.4501]
      },
      properties: {
        value: 120
      }
    }
  ]
};

В HERE Maps GeoJSON обычно преобразуется в H.map.Object:

const reader = new H.data.geojson.Reader();
reader.parseData(geojson);

map.addLayer(reader.getLayer());

Хороплетные карты (Choropleth)

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

Принцип работы

  1. Геометрия регионов (полигоны)
  2. Атрибут (например, плотность населения)
  3. Функция интерполяции цвета

Пример логики стилизации

function getColor(value) {
  if (value > 100) return '#800026';
  if (value > 50) return '#BD0026';
  if (value > 20) return '#E31A1C';
  if (value > 10) return '#FC4E2A';
  return '#FD8D3C';
}

Применение стиля к полигонам:

const style = new H.map.SpatialStyle({
  fillColor: getColor(feature.properties.value),
  strokeColor: '#ffffff',
  lineWidth: 1
});

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

Тепловые карты (Heatmaps)

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

Подготовка данных

Каждая точка имеет вес:

const points = [
  { lat: 50.45, lng: 30.52, weight: 0.8 },
  { lat: 50.46, lng: 30.51, weight: 0.3 }
];

Алгоритм плотности

В основе лежит радиусное распределение влияния:

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

Реализация слоя

const heatmapProvider = new H.data.heatmap.Provider({
  colors: new H.data.heatmap.defaultColors(),
  dataPoints: points
});

const heatmapLayer = new H.map.layer.TileLayer(heatmapProvider);
map.addLayer(heatmapLayer);

Категориальные карты

Категориальные карты отображают дискретные типы объектов:

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

Цветовое кодирование категорий

const categoryStyle = {
  restaurant: '#ff5722',
  hospital: '#2196f3',
  school: '#4caf50'
};
function styleFeature(feature) {
  return new H.map.SpatialStyle({
    fillColor: categoryStyle[feature.properties.type] || '#999999',
    strokeColor: '#333'
  });
}

Тайловые тематические слои

Тайловый подход применяется при больших объёмах данных.

Принцип

  • сервер генерирует PNG/SVG/Vector Tiles
  • клиент подгружает тайлы по координатной сетке
  • стилизация частично переносится на сервер
const tileProvider = new H.map.provider.ImageTileProvider({
  min: 5,
  max: 20,
  getURL: (col, row, level) =>
    `https://example.com/tiles/${level}/${col}/${row}.png`
});

const tileLayer = new H.map.layer.TileLayer(tileProvider);
map.addLayer(tileLayer);

Векторные тематические стили (Vector Tile Styling)

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

  • изменение цвета дорог по трафику
  • отображение зон риска
  • кастомные бизнес-слои
const style = {
  layers: {
    roads: {
      draw: {
        lines: {
          color: '#ff0000',
          width: 2
        }
      }
    }
  }
};

Динамическое обновление данных

Тематические карты часто требуют реального времени.

setInterval(async () => {
  const response = await fetch('/api/data');
  const data = await response.json();

  heatmapProvider.setDataPoints(data);
}, 5000);

Особенность HERE Maps API — минимизация перерисовки, обновляются только изменённые слои.

Кластеризация точек

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

const clusteringProvider = new H.clustering.Provider(dataPoints, {
  clusteringOptions: {
    eps: 32,
    minWeight: 2
  }
});

const clusteringLayer = new H.map.layer.ObjectLayer(clusteringProvider);
map.addLayer(clusteringLayer);

Кластеры агрегируют точки и отображают суммарные значения.

Интерактивность тематических слоёв

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

map.addEventListener('tap', function (evt) {
  const target = evt.target;
  if (target instanceof H.map.Polygon) {
    console.log(target.getData());
  }
});

Интерактивность критична для аналитических сценариев:

  • выделение регионов
  • фильтрация данных
  • всплывающие карточки метрик

Производительность при больших данных

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

  • использование WebGL-рендеринга
  • ограничение количества DOM-объектов
  • агрегация данных на сервере
  • использование тайлов вместо векторных объектов при масштабах страны

Рекомендованная стратегия:

  • мелкий масштаб → тайлы
  • средний масштаб → кластеры
  • крупный масштаб → отдельные объекты

Комбинирование тематических слоёв

Сложные карты строятся через наложение:

  • тепловая карта + кластеры
  • хороплет + маркеры
  • тайлы + интерактивные полигоны

Порядок слоёв влияет на восприятие:

map.getLayers().addAll([
  baseLayer,
  choroplethLayer,
  heatmapLayer,
  markerLayer
]);

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

Стилизация через темы (Theming)

HERE Maps поддерживает централизованные темы отображения:

  • светлая
  • тёмная
  • кастомная корпоративная
const customTheme = new H.map.Style(
  'https://example.com/style.json'
);

const layer = platform.getVectorLayer({
  style: customTheme
});

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

Оглавление