Vector источники

Vector-источники в OpenLayers представляют собой фундаментальный механизм работы с динамическими пространственными данными на стороне клиента. В отличие от растровых слоёв, где данные приходят в виде готовых изображений, векторные источники оперируют геометриями, атрибутами и стилями, позволяя выполнять фильтрацию, интерактивное редактирование и аналитическую обработку прямо в браузере.

Основным классом для работы с векторными данными выступает ol/source/Vector. Он хранит коллекцию объектов Feature, каждая из которых объединяет геометрию и набор атрибутов.

Ключевые свойства VectorSource:

  • features — коллекция геообъектов
  • format — формат чтения/записи данных (GeoJSON, KML, GPX и др.)
  • loader — функция динамической загрузки данных
  • strategy — стратегия подгрузки пространственных данных
  • projection — система координат

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

Создание векторного источника

Базовая инициализация выполняется через объект конфигурации:

import VectorSource from 'ol/source/Vector.js';
import GeoJSON from 'ol/format/GeoJSON.js';

const source = new VectorSource({
  format: new GeoJSON(),
  url: '/data/objects.geojson'
});

В этом варианте OpenLayers автоматически загрузит GeoJSON, распарсит его и создаст набор Feature.

Альтернативный вариант — ручное добавление объектов:

const source = new VectorSource();

source.addFeature(new Feature({
  geometry: new Point([0, 0]),
  name: 'Center point'
}));

Форматы данных и парсинг

VectorSource не работает напрямую с «сырыми» данными. Для преобразования используется слой форматов (ol/format).

GeoJSON

Наиболее распространённый формат:

import GeoJSON from 'ol/format/GeoJSON.js';

const format = new GeoJSON({
  featureProjection: 'EPSG:3857'
});

Особенности:

  • поддержка всех базовых геометрий
  • совместимость с REST API
  • возможность частичной выборки

KML и GPX

Используются для обмена данными с GPS-устройствами и GIS-системами:

import KML from 'ol/format/KML.js';
import GPX from 'ol/format/GPX.js';

KML сохраняет стили и описание объектов, GPX ориентирован на треки и маршруты.

Стратегии загрузки данных

При работе с большими наборами данных ключевым фактором становится стратегия загрузки (strategy).

all

Загружает весь набор данных единовременно:

import { all } from 'ol/loadingstrategy.js';

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

bbox

Загружает данные в пределах видимой области карты:

import { bbox } from 'ol/loadingstrategy.js';

Каждое изменение экстента вызывает новый запрос. Это стандарт для серверных API с поддержкой пространственных фильтров.

tile

Разбивает загрузку на тайлы:

import { tile } from 'ol/loadingstrategy.js';

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

Loader-функции и кастомная загрузка

При необходимости полного контроля используется loader:

const source = new VectorSource({
  loader: function (extent, resolution, projection) {
    const url = `/api/objects?bbox=${extent.join(',')}`;

    fetch(url)
      .then(response => response.json())
      .then(data => {
        const features = new GeoJSON().readFeatures(data);
        source.addFeatures(features);
      });
  }
});

Loader позволяет:

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

Работа с Feature внутри источника

VectorSource предоставляет API для управления объектами:

source.addFeature(feature);
source.addFeatures(features);
source.removeFeature(feature);
source.clear();

Также доступны методы поиска:

const features = source.getFeatures();

И фильтрации:

const filtered = source.getFeatures().filter(f =>
  f.get('type') === 'road'
);

Изменения автоматически триггерят перерисовку слоя, связанного с источником.

Событийная модель

VectorSource генерирует события, позволяющие отслеживать состояние данных:

  • addfeature
  • removefeature
  • changefeature
  • clear

Пример обработки:

source.on('addfeature', function (event) {
  console.log('Добавлен объект:', event.feature);
});

Эта модель используется для синхронизации UI и аналитики.

Кластеризация данных

Для визуализации плотных наборов точек применяется Cluster-источник:

import Cluster from 'ol/source/Cluster.js';

const clusterSource = new Cluster({
  distance: 40,
  source: source
});

Особенности:

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

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

Пространственные особенности и проекции

VectorSource всегда оперирует в определённой проекции. Наиболее распространённая — EPSG:3857.

Преобразование координат выполняется через формат:

new GeoJSON({
  dataProjection: 'EPSG:4326',
  featureProjection: 'EPSG:3857'
});

Несоответствие проекций приводит к смещению объектов и некорректному отображению геометрии.

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

VectorSource поддерживает сценарии реального времени:

  • периодическая перезагрузка loader
  • WebSocket-интеграция
  • инкрементальное добавление объектов

Пример периодического обновления:

setInterval(() => {
  source.clear();
  source.refresh();
}, 10000);

Взаимодействие с фильтрацией и стилями

Хотя стилизация реализуется на уровне слоя, VectorSource предоставляет основу для фильтрации данных до рендера:

const features = source.getFeatures().filter(f =>
  f.get('population') > 100000
);

В сочетании с StyleFunction это позволяет строить сложные визуальные правила отображения.

Ограничения и производительность

При работе с VectorSource важно учитывать:

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

Типичные оптимизации:

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

VectorTileSource как расширение концепции

Хотя он выходит за рамки классического VectorSource, VectorTile решает проблему масштабируемости:

  • данные разбиваются на тайлы
  • рендеринг частично растрово-векторный
  • поддержка MVT (Mapbox Vector Tiles)

Это позволяет работать с миллионами объектов без деградации производительности.

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

VectorSource может использоваться как временное хранилище геоданных:

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

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

Оглавление