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

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

Базовая модель построена на трёх уровнях:

  • Map (контейнер визуализации) — объект карты, управляющий рендерингом и взаимодействием
  • Layer (слой данных) — логическая единица отображения информации
  • Provider (источник данных) — механизм получения и обновления данных слоя

Динамическое обновление слоёв в этом контексте означает изменение содержимого provider’а, пересоздание тайлов, модификацию геометрии или переключение визуальных состояний без полного пересоздания карты.

Механизмы обновления данных слоя

Обновление через смену provider

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

const layer = new H.map.layer.TileLayer(
  new H.map.provider.TileProvider({
    min: 2,
    max: 18,
    getTile: function (x, y, z) {
      return fetch(`/tiles/${z}/${x}/${y}.png`).then(r => r.blob());
    }
  })
);

map.addLayer(layer);

// Обновление источника данных
const newProvider = new H.map.provider.TileProvider({
  min: 2,
  max: 18,
  getTile: function (x, y, z) {
    return fetch(`/tiles-v2/${z}/${x}/${y}.png`).then(r => r.blob());
  }
});

layer.setProvider(newProvider);

При такой схеме карта автоматически инициирует повторный запрос тайлов при следующем обращении к области видимости.

Инвалидация тайлов

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

tileProvider.refresh();

или через слой:

layer.getProvider().refresh();

Инвалидация приводит к повторному запросу только тех тайлов, которые попадают в текущий viewport. Это критично для производительности при частых обновлениях данных.

Обновление геометрических объектов

Для объектов, размещённых через H.map.Object, динамика достигается изменением геометрии:

const line = new H.map.Polyline(
  new H.geo.LineString(),
  { style: { strokeColor: 'blue', lineWidth: 4 } }
);

map.addObject(line);

// обновление координат
const geometry = line.getGeometry();
geometry.pushPoint({ lat: 52.5, lng: 13.4 });
geometry.pushPoint({ lat: 52.6, lng: 13.5 });

line.setGeometry(geometry);

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

Динамические векторные слои

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

const provider = new H.map.provider.VectorTileProvider({
  style: customStyle,
  getTile: (x, y, z) => {
    return fetch(`/vector/${z}/${x}/${y}.json`)
      .then(r => r.json());
  }
});

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

Обновление через изменение источника данных

provider.setUrlTemplate('/vector-v2/{z}/{x}/{y}.json');
provider.refresh();

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

Реактивные обновления через события

Система событий является ключевым механизмом синхронизации слоёв с внешними данными.

provider.addEventListener('tileload', (e) => {
  console.log('Tile loaded:', e.tile.key);
});

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

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

Интеграция с потоковыми данными

WebSocket как источник обновлений слоя

const socket = new WebSocket('wss://example.com/stream');

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

  data.points.forEach(p => {
    const marker = markers.get(p.id);

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

Подобная схема используется в системах трекинга транспорта и IoT-платформах.

Частичное обновление слоёв

Фильтрация объектов без пересоздания слоя

layer.getProvider().setStyle({
  filter: (feature) => feature.properties.type === 'active'
});

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

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

layer.setVisibility(false);
layer.setVisibility(true);

Операция выполняется на уровне рендера и не затрагивает источник данных.

Управление порядком слоёв

Динамическое обновление часто связано с изменением визуальной иерархии:

map.removeLayer(layer);
map.addLayer(layer);

или

map.setBaseLayer(baseLayer);

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

Кеширование и обновление тайлов

Система тайлового кеша в HERE Maps оптимизирована для минимизации сетевых запросов. Однако при динамических обновлениях требуется управление инвалидированием кеша.

Типовые стратегии:

Версионирование URL

'/tiles/v3/{z}/{x}/{y}.png'

Изменение версии автоматически сбрасывает кеш браузера и SDK.

Принудительная очистка через provider

provider.clearCache();
provider.refresh();

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

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

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

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

clusteringProvider.addDataPoints(newPoints);
clusteringProvider.refresh();

При поступлении новых данных выполняется инкрементальное обновление, а не полная пересборка.

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

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

Throttling обновлений

let timeout;

function updateLayer(data) {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    provider.setData(data);
    provider.refresh();
  }, 200);
}

Батчинг изменений

const batch = [];

function addUpdate(point) {
  batch.push(point);

  if (batch.length > 50) {
    applyBatch();
  }
}

function applyBatch() {
  provider.addDataPoints(batch);
  provider.refresh();
  batch.length = 0;
}

Инвалидация области видимости

Иногда требуется обновление только части карты, соответствующей текущему viewport:

const rect = map.getViewBounds();
provider.invalidateRect(rect);

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

Синхронизация пользовательских объектов и слоёв

При комбинировании H.map.Object и tile-based layers возникает необходимость синхронизации:

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

Пример согласованного обновления:

map.removeObjects(map.getObjects());

provider.refresh();

map.addObjects(newObjects);

Анимация изменений данных слоя

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

function animate(marker, from, to, steps) {
  let i = 0;

  const interval = setInterval(() => {
    const lat = from.lat + (to.lat - from.lat) * (i / steps);
    const lng = from.lng + (to.lng - from.lng) * (i / steps);

    marker.setGeometry({ lat, lng });

    i++;
    if (i > steps) clearInterval(interval);
  }, 16);
}

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

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

При работе с несколькими слоями одновременно возникает необходимость координации обновлений:

  • тайловые слои (фоновые данные)
  • векторные слои (объекты)
  • интерактивные оверлеи (UI-слой)
Promise.all([
  backgroundProvider.refresh(),
  vectorProvider.refresh(),
  overlayProvider.refresh()
]).then(() => {
  map.getViewPort().resize();
});

Управление жизненным циклом слоя

Динамическое обновление включает не только изменение данных, но и корректное управление ресурсами:

map.removeLayer(layer);
layer.dispose();

Удаление слоя освобождает память и сетевые подписки, что критично при частой перестройке карты в SPA-приложениях.

Реакция карты на внешние события

Интеграция с внешними системами приводит к необходимости централизованного обновления:

  • изменение фильтров пользователя
  • обновление временного диапазона
  • переключение тематических режимов
function onFilterChange(filter) {
  provider.setFilter(filter);
  provider.refresh();
}

Итоговая модель динамического обновления

Динамическое обновление слоёв в HERE Maps API формируется как комбинация четырёх базовых механизмов:

  • замена provider
  • инвалидация и refresh тайлов
  • изменение геометрии объектов
  • событийная синхронизация с внешними потоками данных

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

Оглавление