Если вы когда-либо пользовались Google Maps, OpenStreetMap или любой современной веб-картой за последнее десятилетие, то все дороги и здания, которые вы видели, скорее всего, загружались именно как векторные тайлы. Этот формат — незаметный герой современной веб-картографии. Именно он обеспечивает быструю загрузку карт, чёткость на любом экране и возможность для дизайнеров создавать красивые стилизованные карты без перерендеринга всего мира под каждый бренд.
Это руководство объясняет, что такое векторный тайл, как он работает, почему он вытеснил растровые тайлы для большинства случаев использования и как MapAtlas обслуживает их в продакшне.
Определение в одном предложении
Векторный тайл — небольшой бинарный файл, содержащий географические объекты одного тайла карты на конкретном уровне зума, закодированные как данные, а не как готовое изображение.
Суть — именно в «данные, а не изображение». У растрового тайла сервер уже решил, как выглядит каждый пиксель. У векторного тайла клиент получает базовую геометрию (линии, полигоны, точки) и подписи, которые рендерятся на лету в тот стиль, который выбрал пользователь.
Как веб-карты используют тайлы
Любая веб-карта делит мир на сетку тайлов. На уровне зума 0 весь мир помещается в один тайл. На уровне 1 их 4, на уровне 2 — 16 и так далее. Каждый тайл идентифицируется тремя числами: зум (z), колонка (x) и строка (y). При панировании или зумировании библиотека карт загружает только видимые тайлы, кэширует их и отбрасывает вышедшие за пределы viewport.
Для растровых тайлов сервер заранее рендерит PNG для каждой комбинации (z, x, y). Это работает, но имеет ограничения: стиль фиксируется во время рендеринга, любое изменение стиля означает перерендеринг всего мира, а изображения должны поставляться в разрешении 1x и 2x для чёткости на Retina-экранах.
Векторные тайлы переворачивают модель. Сервер поставляет геометрию. Клиент рендерит. Один набор тайлов поддерживает любое количество стилей, выглядит чётко при любом DPI и остаётся компактным при передаче.
Формат MVT
Де-факто стандартным форматом является MVT — спецификация Mapbox Vector Tile. MVT — это кодировка Protocol Buffers, которая организует объекты в именованные слои, как правило:
transportation(дороги, железные дороги)buildings(контуры зданий)places(города, посёлки, районы с названиями)landuse(парки, жилые, коммерческие зоны)water(океаны, озёра, реки)boundaries(административные территории)
Каждый объект в слое имеет геометрию (точка, линия, полигон) и набор атрибутов (название, тип, важность, варианты названий на разных языках). Координаты геометрии — целые числа в локальной системе координат тайла, от 0 до 4096, что и обеспечивает компактный размер MVT.
MVT полностью открыт, независим от вендора и поддерживается всеми основными движками рендеринга: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, а также iOS и Android SDK от Mapbox.
Почему векторные тайлы вытеснили растровые
Есть пять причин, по которым современные веб-карты почти повсеместно используют векторные тайлы для базового слоя:
Гибкость стилей. С одним набором тайлов можно рендерить светлую тему, тёмную тему, стиль для печати, стиль с наложением спутниковых снимков и фирменный стиль для маркетинга. Никакого перерендеринга на сервере.
Чёткость при любом DPI. Растровый тайл в разрешении 1x выглядит размытым на Retina-экране. Векторный тайл рендерится заново на клиенте при нативном разрешении устройства.
Меньший объём передаваемых данных. Сложный городской тайл в формате MVT зачастую меньше высококачественного PNG, особенно после gzip-сжатия.
Интерактивность во время выполнения. Можно выделить конкретную дорогу при наведении, убрать ненужные слои, анимировать переходы и реагировать на клики по объектам — потому что клиент знает, что представляет каждый пиксель.
Плавный зум и поворот. Векторная геометрия масштабируется и поворачивается без артефактов. Растровые тайлы выглядят пикселизированными при зуме между целочисленными уровнями или при повороте по оси.
Ценой является нагрузка на CPU и GPU клиента, что некритично для любого устройства, выпущенного за последнее десятилетие.
Что стилизуется во время выполнения
Документ стилей (как правило, JSON по спецификации Mapbox Style Spec, принятой также MapLibre) описывает, как рисовать каждый слой. Примеры того, что можно изменять без вмешательства в данные тайлов:
- Цвет каждого класса дороги
- Ширина линий дорог в зависимости от уровня зума
- Какие подписи населённых пунктов отображаются при каком зуме
- Шрифт, размер и обводка каждой текстовой подписи
- Видимость целых слоёв (отключить все административные границы одним переключением)
- Паттерны заливки, пунктирные линии, градиенты, эффекты размытия
Именно это делает возможными брендированные карты. Дизайн-команда может поставить Mapbox style JSON, MapLibre style JSON или пресет стиля MapAtlas, и один и тот же набор тайлов рендерится в фирменном стиле.
Кэширование и производительность
Векторные тайлы кэшируются очень хорошо, потому что геометрия мира не меняется каждую минуту. CDN-кэши на граничных серверах обычно хранят MVT-тайлы часами или сутками. Библиотека карт предварительно загружает тайлы по вероятному направлению панирования пользователя и держит недавно просмотренные тайлы в памяти. В результате пользователь, панирующий по городу, видит плавный опыт, потому что тайлы для следующего viewport уже загружены.
Продакшн-тайловые сервисы обычно выдают тайлы по пути вида /{z}/{x}/{y}.pbf (PBF — расширение protobuf-бинарника). Современное HTTP/2 или HTTP/3 соединение мультиплексирует десятки параллельных запросов тайлов.
Место MapAtlas в этой системе
MapAtlas обслуживает MVT-совместимые векторные тайлы для продукта Dynamic Maps, с хостингом только в ЕС, предсказуемым ценообразованием и схемой тайлов, разработанной для последующей стилизации и AI-аннотации. Те же слои данных, которые формируют видимую карту (места, транспорт, здания, точки интереса), доступны также как структурированные данные через Geocoding и Search API, так что объект на карте можно получить как типизированную JSON-запись для собственной логики.
Подробнее о слое рендеринга читайте в руководстве по кастомной стилизации карт, которое описывает создание фирменного стиля для векторных тайлов от начала до конца.
Часто задаваемые вопросы
Что такое векторный тайл?
Векторный тайл — небольшой бинарный файл, содержащий географические объекты (дороги, здания, точки интереса, подписи) для одного тайла веб-карты на конкретном уровне зума. В отличие от растрового тайла, который является готовым PNG- или JPG-изображением, векторный тайл хранит геометрию и атрибуты как данные. Браузер или мобильный клиент рендерит эти данные в пиксели во время выполнения, что позволяет стилизовать один и тот же тайл по-разному, поворачивать его и рендерить при любой плотности пикселей без потери чёткости.
В чём разница между векторным тайлом и растровым тайлом?
Растровый тайл — фиксированное PNG- или JPG-изображение, обычно 256x256 или 512x512 пикселей, заранее отрендеренное на сервере с фиксированным стилем. Векторный тайл — бинарный файл с геометрией и атрибутами, который рендерится в пиксели клиентом. Векторные тайлы меньше по размеру при передаче, поддерживают изменение стиля в реальном времени, чётко выглядят при любом зуме и DPI и позволяют переключать слои без повторной загрузки. Компромисс в том, что клиент выполняет работу по рендерингу — это некритично для любого современного браузера или телефона.
Что такое формат MVT?
MVT — это спецификация Mapbox Vector Tile, де-факто стандартный формат векторных тайлов. Представляет собой кодировку географических объектов одного тайла на основе Protocol Buffers (protobuf), организованных в именованные слои (например, roads, buildings, places). Формат является открытым, независимым от вендора и поддерживается каждым современным рендерером карт (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas обслуживает MVT-совместимые тайлы через endpoint динамических карт.
Насколько малы векторные тайлы?
Типичный городской векторный тайл на уровне зума 14 занимает от 50 до 200 КБ по сети, нередко сжимаясь до 30-100 КБ после gzip. Размер зависит от плотности данных в районе: тайл, охватывающий центр Парижа, тяжелее тайла над Атлантическим океаном. Большинство продакшн-карт обеспечивают плавное панирование и зум, поскольку тайлы агрессивно кэшируются, предварительно загружаются по вероятному направлению взгляда пользователя и рендерятся на GPU.
