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

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

В экосистеме Mapbox GL JS используются два основных типа тайлов:

растровые тайлы (Raster Tiles);
векторные тайлы (Vector Tiles).

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

Что такое растровые тайлы

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

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

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

Сервер генерирует изображения тайлов.
Клиент загружает нужные изображения.
Браузер отображает их как мозаику.
При изменении масштаба загружается новый набор изображений.

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

Каждый тайл уже содержит готовое визуальное представление данных:

дороги нарисованы линиями;
водоёмы окрашены цветом;
подписи встроены в изображение;
стилизация выполнена заранее.

Клиент не знает, что именно изображено внутри тайла. Для браузера это просто картинка.

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

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

map.addLayer({
    id: 'satellite-layer',
    type: 'raster',
    source: 'satellite'
});

В данном случае Mapbox GL JS получает изображения и отображает их без дополнительной обработки.

Что такое векторные тайлы

Векторный тайл содержит не изображение, а набор географических объектов и их атрибутов.

Внутри тайла могут находиться:

точки;
линии;
полигоны;
текстовые свойства объектов;
служебные данные.

Фактически клиент получает миниатюрную базу геоданных для определённого участка карты.

После загрузки тайла отрисовка выполняется непосредственно в браузере средствами WebGL.

Структура векторного тайла

Векторный тайл обычно содержит несколько слоёв данных.

Например:

roads
buildings
water
landuse
places

Внутри слоя roads могут находиться записи вида:

{
  "class": "motorway",
  "name": "A1"
}

Внутри слоя buildings:

{
  "height": 120,
  "type": "commercial"
}

Mapbox GL JS анализирует эти данные и самостоятельно рисует карту согласно настройкам стиля.

Формат Mapbox Vector Tile (MVT)

Наиболее распространённым стандартом является формат Mapbox Vector Tile (MVT).

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

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

Обычно используются файлы:

.pbf

где PBF означает Protocol Buffers.

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

map.addSource('city-data', {
    type: 'vector',
    tiles: [
        'https://example.com/tiles/{z}/{x}/{y}.pbf'
    ]
});

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

Например:

map.addLayer({
    id: 'roads',
    type: 'line',
    source: 'city-data',
    'source-layer': 'roads',
    paint: {
        'line-color': '#3366ff',
        'line-width': 2
    }
});

Главное отличие: данные против изображения

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

Растровый тайл

PNG
└── готовая картинка

Векторный тайл

PBF
├── дороги
├── здания
├── водоёмы
├── парки
└── атрибуты объектов

Поэтому возможности клиента существенно различаются.

Масштабирование изображения

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

Предположим, имеется тайл размером:

256 × 256 пикселей

При сильном увеличении браузер растягивает изображение.

Результат:

размытие;
пикселизация;
ухудшение читаемости текста.

Векторные тайлы масштабируются иначе.

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

Преимущества:

высокая чёткость;
отсутствие пикселизации;
корректное отображение на Retina-дисплеях;
качественное масштабирование до максимальных уровней.

Размер передаваемых данных

Рассмотрим условный городской район.

Растровый вариант

Тайл может содержать:

PNG 200 КБ

При изменении стиля необходимо загружать новый набор изображений.

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

Тот же район может занимать:

PBF 30–80 КБ

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

Особенно заметна экономия на высоких масштабах.

Изменение стилей на клиенте

Одно из важнейших преимуществ Mapbox GL JS связано именно с векторными тайлами.

Для растровых данных изменение внешнего вида требует новой генерации изображений на сервере.

Например:

изменить цвет дорог;
изменить толщину линий;
скрыть здания;
изменить подписи.

Каждое изменение потребует создания новых тайлов.

Во векторной архитектуре стиль хранится отдельно от данных.

Пример изменения цвета дорог

map.setPaintProperty(
    'roads',
    'line-color',
    '#ff0000'
);

После выполнения команды:

данные не перезагружаются;
сервер не участвует;
карта мгновенно обновляется.

Это фундаментальное преимущество Mapbox GL JS.

Темы оформления карты

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

Например:

Светлая тема

'line-color': '#555'

Тёмная тема

'line-color': '#f0f0f0'

Навигационная тема

'line-color': '#0066ff'

Все стили работают поверх одного и того же источника данных.

Фильтрация объектов

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

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

Векторные тайлы поддерживают фильтрацию в реальном времени.

map.setFilter('buildings', [
    '==',
    ['get', 'type'],
    'commercial'
]);

После применения фильтра отображаются только коммерческие здания.

Работа с атрибутами объектов

Каждый объект внутри векторного тайла может содержать набор свойств.

Пример:

{
  "name": "Central Park",
  "type": "park",
  "area": 150000
}

Эти свойства могут использоваться для:

фильтрации;
стилизации;
поиска;
всплывающих окон;
аналитики.

Растровые тайлы подобной информации не содержат.

Data-Driven Styling

Одной из наиболее мощных возможностей Mapbox GL JS является стилизация на основе данных.

Например, цвет здания может зависеть от его высоты.

paint: {
    'fill-color': [
        'interpolate',
        ['linear'],
        ['get', 'height'],
        0, '#ffffcc',
        100, '#41b6c4',
        300, '#253494'
    ]
}

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

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

Растровые карты обычно имеют низкую нагрузку на графический процессор.

Браузеру необходимо лишь отобразить изображения.

Однако нагрузка на сеть может быть значительной из-за большого объёма графических данных.

Векторные карты работают иначе.

После загрузки данных происходит:

декодирование тайлов;
анализ объектов;
построение геометрии;
рендеринг через WebGL.

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

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

Использование WebGL

Mapbox GL JS изначально разрабатывался как WebGL-библиотека.

Векторные тайлы идеально подходят для такого подхода.

Преимущества WebGL:

аппаратное ускорение;
плавное масштабирование;
высокая частота кадров;
поддержка трёхмерной графики;
динамические эффекты.

Растровая карта не может полноценно использовать большую часть этих возможностей.

Трёхмерные здания

Для построения объёмных моделей необходимы данные о геометрии объектов.

Векторные тайлы могут содержать свойства:

{
  "height": 120
}

На их основе создаётся экструзия.

map.addLayer({
    id: '3d-buildings',
    type: 'fill-extrusion',
    source: 'city-data',
    'source-layer': 'buildings',
    paint: {
        'fill-extrusion-height': ['get', 'height']
    }
});

Для растровых тайлов аналогичный механизм невозможен.

Интерактивность

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

Например:

map.on('click', 'roads', (e) => {
    console.log(e.features[0]);
});

Можно получать:

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

С растровым изображением подобная интерактивность отсутствует.

Поиск объектов

Mapbox GL JS предоставляет методы поиска объектов внутри отображаемых тайлов.

Пример:

const features = map.queryRenderedFeatures();

Результат содержит реальные географические объекты.

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

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

Когда растровые тайлы остаются лучшим выбором

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

Она по-прежнему используется в ряде задач.

Спутниковые снимки

Фотографии поверхности Земли являются растровыми по своей природе.

Примеры:

аэрофотосъёмка;
спутниковые изображения;
ортофотопланы.

Исторические карты

Сканированные карты невозможно автоматически преобразовать в полноценные векторные данные без сложной обработки.

Поэтому чаще применяются растровые тайлы.

Тепловые карты, подготовленные сервером

Некоторые аналитические системы генерируют изображения заранее:

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

Такие слои часто распространяются в растровом формате.

Когда предпочтительны векторные тайлы

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

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

Именно поэтому Mapbox GL JS ориентирован прежде всего на использование векторных тайлов как основного формата представления картографических данных.

Сравнительная таблица

Характеристика	Растровые тайлы	Векторные тайлы
Содержимое	Изображение	Геометрия и атрибуты
Формат	PNG, JPEG	PBF, MVT
Масштабирование	Пикселизация	Без потери качества
Изменение стиля	Требует новой генерации	Выполняется на клиенте
Фильтрация объектов	Нет	Да
Атрибуты объектов	Нет	Да
Интерактивность	Ограничена	Высокая
Размер данных	Обычно больше	Обычно меньше
Поддержка 3D	Нет	Да
Работа через WebGL	Ограничена	Полная
Data-Driven Styling	Нет	Да
Поиск объектов	Нет	Да

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