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

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

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

Основные категории слоёв:

  • базовые тайловые слои (map tiles)
  • объектные слои (H.map.layer.ObjectLayer)
  • слои кластеризации
  • пользовательские тайловые слои
  • GeoJSON-слои через Data API

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

Объектные слои и управление графическими объектами

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

Создание слоя:

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

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

Добавление маркера:

const marker = new H.map.Marker({ lat: 52.52, lng: 13.405 });
objectLayer.addObject(marker);

Добавление полилинии:

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

lineString.pushPoint({ lat: 52.52, lng: 13.405 });
lineString.pushPoint({ lat: 52.50, lng: 13.40 });

const polyline = new H.map.Polyline(lineString, {
  style: { strokeColor: 'blue', lineWidth: 3 }
});

objectLayer.addObject(polyline);

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

Создание собственных структур данных поверх карты

Пользовательские слои часто строятся на основе собственных моделей данных. Это могут быть:

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

Пример группировки данных:

const group = new H.map.Group();

const pointA = new H.map.Marker({ lat: 52.51, lng: 13.39 });
const pointB = new H.map.Marker({ lat: 52.53, lng: 13.42 });

group.addObjects([pointA, pointB]);

objectLayer.addObject(group);

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

group.addEventListener('tap', function (evt) {
  console.log('Группа объектов активирована');
});

GeoJSON-слои и динамическая загрузка данных

Одним из наиболее гибких способов построения слоёв является использование GeoJSON. HERE Maps API предоставляет парсер через H.data.geojson.Reader.

Загрузка GeoJSON:

const reader = new H.data.geojson.Reader('data/points.geojson');

reader.parse();

const geoLayer = reader.getLayer();
map.addLayer(geoLayer);

Пример GeoJSON структуры:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [13.405, 52.52]
      },
      "properties": {
        "name": "Центр"
      }
    }
  ]
}

Слой GeoJSON автоматически преобразует геометрию в объекты карты и позволяет применять стили через свойства.

Кастомизация GeoJSON объектов

Стилизация объектов может быть задана на уровне слоя:

const reader = new H.data.geojson.Reader('data/areas.geojson', {
  style: function (feature) {
    if (feature.getProperty('type') === 'danger') {
      return {
        fillColor: 'red',
        strokeColor: 'darkred',
        lineWidth: 2
      };
    }

    return {
      fillColor: 'green',
      strokeColor: 'darkgreen'
    };
  }
});

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

Кастомные тайловые слои

В случаях, когда требуется интеграция нестандартных источников данных (например, собственные серверы тайлов), используется H.map.provider.TileProvider.

Базовая структура кастомного тайлового слоя:

const provider = new H.map.provider.TileProvider({
  getTile: function (x, y, zoom) {
    const url = `https://example.com/tiles/${zoom}/${x}/${y}.png`;

    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onl oad = () => resolve(img);
      img.oner ror = reject;
      img.src = url;
    });
  }
});

const customLayer = new H.map.layer.TileLayer(provider);
map.addLayer(customLayer);

Этот механизм используется для:

  • тепловых карт
  • спутниковых слоёв
  • аналитических тайлов
  • офлайн-данных

Кластеризация объектов в слоях

При большом количестве точек производительность становится критическим фактором. Решение — кластеризация через H.clustering.Provider.

const dataPoints = [
  { lat: 52.52, lng: 13.40 },
  { lat: 52.53, lng: 13.41 },
  { lat: 52.54, lng: 13.42 }
];

const dataPointsObjects = dataPoints.map(
  p => new H.map.Marker(p)
);

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

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

Кластеры автоматически пересчитываются при изменении масштаба карты, объединяя близкие точки в агрегированные объекты.

Динамическое обновление слоёв

Слои в HERE Maps API могут обновляться в реальном времени. Это особенно важно для:

  • GPS-трекинга
  • мониторинга транспорта
  • IoT-данных

Пример обновления позиции объекта:

marker.setGeometry({ lat: 52.55, lng: 13.45 });

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

group.removeAll();
group.addObjects(newObjectsArray);

Управление видимостью и состоянием слоёв

Каждый слой может быть включён или выключен без удаления данных:

map.removeLayer(objectLayer);
map.addLayer(objectLayer);

Альтернативно можно управлять видимостью объектов:

marker.setVisibility(false);
marker.setVisibility(true);

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

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

Событийная модель объектов слоёв

Объекты внутри слоёв поддерживают событийную модель:

marker.addEventListener('tap', function (evt) {
  console.log('Маркер выбран');
});

События могут распространяться вверх по иерархии:

  • объект
  • группа
  • слой
  • карта

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

Оптимизация производительности слоёв

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

  • минимизацию количества объектов на экране
  • использование кластеризации
  • lazy-loading GeoJSON
  • ограничение перерисовок

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

  • хранить данные вне карты
  • создавать объекты только для видимой области
  • обновлять слой при изменении viewport

Пример проверки границ:

map.addEventListener('mapviewchangeend', function () {
  const bounds = map.getViewModel().getLookAtData().bounds;
  console.log(bounds);
});

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

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

  • базовый тайловый слой
  • GeoJSON слой для геометрий
  • объектный слой для интерактивных элементов
  • кластерный слой для плотных данных
  • пользовательский тайловый слой для аналитики

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

map.addLayer(baseLayer);
map.addLayer(geoLayer);
map.addLayer(objectLayer);
map.addLayer(customLayer);

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

Интеграция пользовательских слоёв с внешними API

Часто данные для слоёв поступают из внешних источников:

  • REST API
  • WebSocket потоков
  • очередей сообщений

Пример обновления через WebSocket:

socket.onmess age = function (event) {
  const data = JSON.parse(event.data);

  marker.setGeometry({
    lat: data.lat,
    lng: data.lng
  });
};

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

Оглавление