Хранение данных

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

Основные типы источников:

  • GeoJSON Source
  • Vector Tile Source
  • Raster Tile Source
  • Image Source
  • Video Source

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

GeoJSON как базовая модель хранения

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

Добавление GeoJSON-источника:

map.on('load', () => {
  map.addSource('points', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [37.6173, 55.7558]
          },
          properties: {
            title: 'Москва'
          }
        }
      ]
    }
  });
});

GeoJSON хранится в памяти клиента и может быть обновлён без перезагрузки карты.

Обновление данных:

const source = map.getSource('points');

source.setData({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [30.3141, 59.9386]
      },
      properties: {
        title: 'Санкт-Петербург'
      }
    }
  ]
});

Метод setData является ключевым механизмом управления состоянием GeoJSON-источника.

Векторные тайлы и серверное хранение

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

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

map.addSource('cities', {
  type: 'vector',
  url: 'mapbox://mapbox.660ui7x6'
});

или через шаблон:

map.addSource('custom-tiles', {
  type: 'vector',
  tiles: [
    'https://example.com/tiles/{z}/{x}/{y}.pbf'
  ],
  minzoom: 0,
  maxzoom: 14
});

Хранение данных в этом случае происходит на стороне сервера или в tile storage, а клиент выполняет лишь выборочную загрузку.

Растровые источники и кэширование изображений

Raster Tile Source применяется для подложек, спутниковых снимков и любых растровых изображений, разбитых на тайлы.

map.addSource('satellite', {
  type: 'raster',
  tiles: [
    'https://server.com/tiles/{z}/{x}/{y}.png'
  ],
  tileSize: 256
});

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

Image Source как локальное хранение одного объекта

Image Source используется для привязки одного изображения к координатам на карте. Это эффективный способ хранения небольших визуальных данных.

map.addSource('overlay', {
  type: 'image',
  url: 'https://example.com/image.png',
  coordinates: [
    [30.0, 60.0],
    [32.0, 60.0],
    [32.0, 58.0],
    [30.0, 58.0]
  ]
});

Данные изображения не разбиваются на тайлы и полностью загружаются в память.

Video Source как потоковое хранение данных

Video Source позволяет использовать видеопотоки как геопривязанные данные.

map.addSource('drone-video', {
  type: 'video',
  urls: [
    'https://example.com/video.mp4'
  ],
  coordinates: [
    [30.0, 60.0],
    [32.0, 60.0],
    [32.0, 58.0],
    [30.0, 58.0]
  ]
});

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

Хранение данных в слоях и связь с источниками

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

Пример связи:

map.addLayer({
  id: 'city-points',
  type: 'circle',
  source: 'points',
  paint: {
    'circle-radius': 6,
    'circle-color': '#ff0000'
  }
});

Слой получает данные из источника и интерпретирует их согласно стилю.

Внутреннее хранение данных в клиенте

Mapbox GL JS использует WebGL и worker-потоки для обработки данных. После загрузки источники преобразуются в оптимизированные структуры:

  • GeoJSON преобразуется в внутренние feature-структуры
  • Vector tiles декодируются в бинарные буферы
  • Тайлы кэшируются в памяти
  • Избыточные данные удаляются при выходе из области видимости

Основная цель — минимизация использования основной нити браузера.

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

GeoJSON-источники поддерживают реактивное обновление без пересоздания слоя. При вызове setData происходит:

  • пересборка геометрии
  • обновление буферов WebGL
  • перерисовка затронутых тайлов

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

Кэширование тайлов и повторное использование данных

Vector и Raster источники используют многоуровневое кэширование:

  • браузерный HTTP cache
  • внутренний tile cache Mapbox GL JS
  • GPU-буферы для ускоренной отрисовки

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

Локальное хранение и офлайн-сценарии

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

Структура хранения включает:

  • индекс тайлов по z/x/y
  • бинарные PBF-файлы
  • метаданные стиля
  • локальный кэш ресурсов

Mapbox GL JS может работать с такими данными через заранее подготовленные офлайн-источники.

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

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

  • GeoJSON подходит для малых и средних наборов
  • Vector tiles масштабируются на большие объёмы данных
  • Raster источники оптимальны для изображений
  • Image/Video источники используются для специализированных задач

Ключевым ограничением остаётся объём памяти браузера и стоимость декодирования геометрии в WebGL-пайплайн.

Оглавление