Локальные источники данных

В Mapbox GL JS вся работа с геоданными строится вокруг объекта источников (sources). Источник определяет, откуда библиотека получает данные для отображения на карте, и в каком формате эти данные будут интерпретироваться. Локальные источники данных представляют собой данные, загружаемые напрямую в браузер или передаваемые в виде объектов JavaScript без обращения к удалённым серверам тайлов.

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

GeoJSON как основной локальный источник

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

Подключение GeoJSON-источника выполняется через метод addSource:

map.on('load', () => {
  map.addSource('points-source', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [69.2401, 41.2995]
          },
          properties: {
            title: 'Объект 1'
          }
        }
      ]
    }
  });
});

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

Обновление локальных GeoJSON данных

Одним из ключевых механизмов является возможность обновления данных без пересоздания источника. Для этого используется метод setData.

map.getSource('points-source').setData({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [69.2500, 41.3100]
      },
      properties: {
        title: 'Обновлённый объект'
      }
    }
  ]
});

Обновление через setData приводит к мгновенной перерисовке всех слоёв, зависящих от данного источника. Это позволяет реализовывать:

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

Локальные векторные источники

Хотя векторные источники чаще используются через удалённые тайлы, Mapbox GL JS поддерживает работу с локальными векторными данными через спецификацию vector. Такие источники требуют заранее подготовленных тайлов в формате Mapbox Vector Tile (MVT), которые могут храниться локально или раздаваться с собственного сервера.

map.addSource('local-vector', {
  type: 'vector',
  tiles: [
    'http://localhost:8080/tiles/{z}/{x}/{y}.pbf'
  ]
});

Локальные векторные источники используются, когда требуется:

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

Растровые локальные источники

Растровые источники (raster) позволяют подключать набор изображений в виде тайлов. В локальном контексте это могут быть:

  • сканированные карты
  • ортофотопланы
  • пользовательские подложки
map.addSource('local-raster', {
  type: 'raster',
  tiles: [
    './tiles/{z}/{x}/{y}.png'
  ],
  tileSize: 256
});

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

Image-источники

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

map.addSource('overlay-image', {
  type: 'image',
  url: './overlay.png',
  coordinates: [
    [69.20, 41.35],
    [69.30, 41.35],
    [69.30, 41.25],
    [69.20, 41.25]
  ]
});

Такой подход используется для:

  • наложения схем и чертежей
  • геопривязанных иллюстраций
  • визуализации зон и территорий

Видео как локальный источник

Mapbox GL JS поддерживает источник типа video, позволяющий накладывать видеопоток на карту с географической привязкой.

map.addSource('video-source', {
  type: 'video',
  urls: [
    './video.mp4'
  ],
  coordinates: [
    [69.20, 41.35],
    [69.30, 41.35],
    [69.30, 41.25],
    [69.20, 41.25]
  ]
});

Этот тип источника применяется в задачах:

  • анализа динамических сцен
  • визуализации наблюдений
  • интеграции с камерами и дронами

Особенности работы с локальными источниками

Локальные источники отличаются высокой гибкостью, но требуют контроля со стороны разработчика:

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

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

  • ограничение на количество объектов
  • стоимость перерисовки при каждом setData
  • необходимость упрощения геометрии

Производительность GeoJSON источников

GeoJSON остаётся самым гибким, но не всегда самым быстрым форматом. При увеличении количества объектов возрастает нагрузка на:

  • парсинг JSON
  • кластеризацию точек
  • пересчёт стилей слоёв

Для оптимизации используются:

  • кластеризация (cluster: true)
  • упрощение геометрии
  • разбивка данных на несколько источников
  • переход к векторным тайлам при больших объёмах

Пример включения кластеризации:

map.addSource('cluster-source', {
  type: 'geojson',
  data: '/data/points.geojson',
  cluster: true,
  clusterMaxZoom: 14,
  clusterRadius: 50
});

Динамические сценарии использования локальных источников

Локальные источники часто применяются в интерактивных приложениях:

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

Типичная схема работы включает:

  1. загрузку базового GeoJSON
  2. отображение через слой (layer)
  3. изменение данных через setData
  4. реактивное обновление визуализации

Связь источников и слоёв

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

  • circle для точек
  • line для линий
  • fill для полигонов
  • symbol для текстов и иконок

Пример связывания:

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

Изоляция локальных источников

Каждый источник в Mapbox GL JS изолирован по имени. Это позволяет:

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

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

Оглавление