Форматирование данных

Работа с данными в экосистеме Mapbox строится вокруг строгой модели источников (sources) и слоёв (layers), где данные отделены от визуального представления. Такая архитектура позволяет переиспользовать одни и те же данные в разных стилях, динамически обновлять отображение и эффективно работать с большими объёмами геоинформации.

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

Источники данных и их структура

В Mapbox GL JS данные добавляются через метод map.addSource, где каждый источник имеет тип и набор параметров.

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

  • geojson
  • vector
  • raster
  • image
  • video

Базовая структура источника:

map.addSource('cities', {
  type: 'geojson',
  data: 'https://example.com/cities.geojson'
});

Или с инлайновыми данными:

map.addSource('points', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: []
  }
});

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

GeoJSON как основной формат обмена данными

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

Базовые элементы GeoJSON:

  • FeatureCollection — коллекция объектов
  • Feature — объект с геометрией и свойствами
  • Geometry — геометрия (Point, LineString, Polygon и др.)

Пример корректного GeoJSON:

{
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [71.4304, 51.1281]
      },
      properties: {
        name: "Astana",
        population: 1200000
      }
    }
  ]
}

Особенности форматирования GeoJSON

  • координаты всегда в формате [longitude, latitude]
  • порядок координат строго фиксирован
  • свойства объектов находятся в properties
  • геометрия отделена от метаданных

Эта структура позволяет Mapbox эффективно индексировать и фильтровать данные на уровне GPU.

Векторные тайлы как высокопроизводительный формат

Векторные тайлы (vector tiles) представляют данные в виде предварительно разрезанных и оптимизированных фрагментов.

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

map.addSource('roads', {
  type: 'vector',
  url: 'mapbox://mapbox.mapbox-streets-v8'
});

Векторные данные:

  • разбиты по зум-уровням
  • содержат только необходимые объекты для текущего масштаба
  • кодируются в бинарном формате (MVT)

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

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

Растровые источники используют изображения, разбитые на тайлы.

map.addSource('satellite', {
  type: 'raster',
  url: 'mapbox://mapbox.satellite',
  tileSize: 256
});

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

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

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

Image source и привязка изображения к географии

Image source позволяет накладывать одно изображение на заданный географический прямоугольник.

map.addSource('overlay', {
  type: 'image',
  url: 'https://example.com/image.png',
  coordinates: [
    [71.0, 51.5],
    [72.0, 51.5],
    [72.0, 50.5],
    [71.0, 50.5]
  ]
});

Форматирование данных здесь сводится к точному заданию геопривязки:

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

Video source и геопривязка потоков

Video source работает аналогично image, но с поддержкой мультимедиа потока.

map.addSource('drone-video', {
  type: 'video',
  urls: ['https://example.com/video.mp4'],
  coordinates: [
    [71.0, 51.5],
    [72.0, 51.5],
    [72.0, 50.5],
    [71.0, 50.5]
  ]
});

Особенности форматирования:

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

Структура свойств объектов (Feature Properties)

Вся семантика данных хранится в properties. Эти свойства используются для фильтрации, стилизации и интерактивности.

{
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [71.4, 51.1]
  },
  properties: {
    type: "restaurant",
    rating: 4.8,
    name: "Central Cafe"
  }
}

Форматирование properties:

  • допускаются только сериализуемые значения
  • предпочтительны примитивы (string, number, boolean)
  • вложенные структуры ограничены в использовании

Использование данных в слоях

Данные становятся визуально значимыми только после привязки к слою.

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

Слой определяет:

  • способ визуализации
  • стилизацию
  • фильтрацию данных

Data-driven styling и выражения

Mapbox GL JS поддерживает выражения, позволяющие связывать свойства данных со стилями.

paint: {
  'circle-radius': ['interpolate', ['linear'], ['get', 'population'], 1000, 4, 1000000, 20]
}

Форматирование данных становится критически важным:

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

Feature State и динамические данные

Feature State позволяет хранить временные данные, не изменяя GeoJSON.

map.setFeatureState(
  { source: 'cities', id: 1 },
  { hover: true }
);

Особенности форматирования:

  • данные хранятся отдельно от GeoJSON
  • используются для интерактивности (hover, select)
  • не сериализуются в исходный источник

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

При работе с большими наборами точек применяется кластеризация:

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

Форматирование данных:

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

Обновление данных в рантайме

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

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

source.setData({
  type: 'FeatureCollection',
  features: updatedFeatures
});

При этом важно соблюдать:

  • корректность GeoJSON структуры
  • отсутствие циклических ссылок
  • минимизацию лишних свойств

Оптимизация структуры данных

Эффективное форматирование данных напрямую влияет на производительность.

Рекомендуемые практики:

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

Подготовка данных на стороне сервера

В высоконагруженных приложениях форматирование переносится в backend:

  • генерация vector tiles
  • упрощение геометрии
  • нормализация атрибутов
  • разбиение по zoom-уровням

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

Связь форматов и визуализации

Каждый формат данных в Mapbox GL JS соответствует определённой модели отображения:

  • GeoJSON — гибкость и динамика
  • Vector tiles — масштабируемость
  • Raster — визуальные слои
  • Image/Video — геопривязанные оверлеи

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

Оглавление