Векторные или растровые тайлы: что выбрать для веб-приложения?

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

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

Вопрос о формате тайлов возникает на ранней стадии почти любого картографического проекта, а в интернете полно поверхностных ответов, которые сводятся к «векторные тайлы новее». Здесь мы идём глубже: конвейеры рендеринга, размер передаваемых данных, совместимость с браузерами, управление стилями и конкретные сценарии, в которых растровые тайлы остаются верным выбором.

Если вы уже пишете код и вам нужен только пример, переходите к разделу Быстрый старт.

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

Растровый тайл представляет собой заранее отрисованное изображение PNG или JPEG, обычно размером 256×256 или 512×512 пикселей, которое показывает фиксированный фрагмент мира на определённом уровне зума. Когда пользователь сдвигает или масштабирует карту, браузер запрашивает соседние тайлы или тайлы с большим разрешением, которые сервер уже отрисовал и закэшировал.

Рендеринг целиком происходит на сервере. В браузер приходит готовая картинка: пиксели уже расставлены, цвета уже зафиксированы. Задача браузера сводится к тому, чтобы её показать.

Как работают серверы растровых тайлов

Стек растровых тайлов обычно выглядит так:

1. Исходные географические данные (OpenStreetMap, кадастровые данные, модели рельефа) обрабатываются и загружаются в базу данных.
2. Движок рендеринга (классический вариант Mapnik) заранее отрисовывает тайлы для каждого уровня зума и складывает их в кэш.
3. Тайловый сервер (TileServer GL в растровом режиме или управляемый CDN) отдаёт закэшированные изображения по URL вида /{zoom}/{x}/{y}.png.

В итоге получается простая, быстрая система без состояния. Тайл может запросить любой HTTP-клиент: браузер, мобильное приложение, серверный процесс, генерирующий изображение карты, или настольное ГИС-приложение.

Сильные стороны растровых тайлов

• Никакой нагрузки на рендеринг в клиенте. Браузер просто показывает изображение. Не нужны WebGL, компиляция шейдеров и отрисовка шрифтов.
• Универсальная совместимость. Работают в любом браузере любой версии, включая Internet Explorer и headless-среды рендеринга.
• Предсказуемый внешний вид. Карта выглядит ровно так, как её отрисовал тайловый сервер. Никаких различий на стороне клиента.
• Простая генерация изображений на сервере. Идеально подходят для статичных изображений карты в письмах, PDF-отчётах и карточках для соцсетей.

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

• Большой размер файлов. Тайл PNG 256×256 весит от пары КБ над открытой местностью до примерно 40-45 КБ над плотной городской застройкой. Тайл для Retina (512×512) содержит в четыре раза больше пикселей.
• Пикселизация на экранах с высокой плотностью пикселей. Тайл, отрисованный для экрана 1x, выглядит размытым на экране Retina 2x, если не отдавать тайлы @2x, а это удваивает трафик.
• Нет поворота и наклона. При повороте растровой карты подписи поворачиваются вместе с ней и становятся нечитаемыми. Поэтому растровые карты почти всегда показывают с ориентацией на север.
• Нельзя менять стиль на клиенте. Хотите изменить цвет дорог, скрыть значки POI или включить тёмную тему? Понадобится новый набор тайлов, заранее отрисованный на сервере.
• Интерполяция зума. Между целыми уровнями зума браузер растягивает существующее изображение, и оно размывается. Ощущения плавного зума, как у векторных тайлов, у растра нет.

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

Векторный тайл содержит исходные географические данные для участка карты: геометрию дорог, полигоны зданий, водоёмы, зоны землепользования, данные для размещения подписей. Всё это закодировано в компактном бинарном виде (обычно в формате Mapbox Vector Tile, .mvt). Пикселей в тайле нет. Он описывает, что находится в этом районе, а не как это должно выглядеть.

Рендеринг целиком происходит на клиенте с помощью WebGL. Когда вы загружаете карту, совместимую с Mapbox GL JS (например, MapAtlas), SDK запрашивает векторные тайлы, получает геометрию и по вашей спецификации стиля рисует каждую дорогу, здание и подпись на элементе <canvas> в реальном времени, с частотой до 60 кадров в секунду на достаточно мощном оборудовании.

Как устроен рендеринг векторных тайлов

Vector tile (.mvt) + Style JSON → WebGL shader → Canvas pixels

Style JSON (структурированный файл, которым управляете вы) сообщает рендереру: рисуй дороги этим цветом, выдавливай здания на такую высоту, используй этот шрифт для подписей, скрывай эти типы слоёв при зуме ниже 12. Стиль можно менять во время работы приложения без загрузки новых тайлов.

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

• Меньше загрузок при зуме. Векторный тайл загружается до максимального зума источника (часто 14) и повторно используется на всех более крупных уровнях зума, тогда как растровая карта на каждом шаге зума загружает четыре новых тайла. В плотной городской застройке один векторный тайл может весить больше растрового аналога, поэтому экономия достигается за счёт повторного использования, а не за счёт меньшего размера файлов.
• Чёткость при любом разрешении. Векторная геометрия масштабируется математически. Экран Retina получает тот же тайл, что и обычный экран, рендерер просто выводит больше пикселей. Варианты тайлов @2x не нужны.
• Плавный зум и поворот. Рендерер работает с исходной геометрией, поэтому зум интерполируется непрерывно (а не только по целым уровням), а карту можно наклонять и поворачивать, при этом подписи всегда остаются вертикальными.
• Полный контроль над стилем на клиенте. Любое визуальное свойство (цвет дорог, шрифт подписей, видимость слоя, непрозрачность) меняется обновлением объекта стиля. Новых запросов тайлов нет. Тёмная тема означает замену Style JSON, а не новый набор тайлов.
• Трёхмерные здания. Векторные тайлы содержат данные о высоте зданий. Рендерер может выдавить полигоны в 3D с помощью WebGL. У растровых тайлов понятия высоты нет.
• Стилизация на основе данных. Раскрашивайте дороги по ограничению скорости, зоны землепользования по категориям, масштабируйте маркеры по численности населения. Всё это управляется свойствами данных в тайле, без изменений на сервере.

Слабые стороны векторных тайлов

• Нужен WebGL. Без поддержки WebGL векторные тайлы не отрисуются. Это исключает очень старые браузеры (IE11) и некоторые headless-среды.
• Нагрузка на CPU и GPU клиента. Рендеринг выполняется на устройстве пользователя. На бюджетных Android-смартфонах или сильно загруженных компьютерах сложные стили с множеством слоёв могут вызывать просадки кадров.
• Более сложная начальная настройка. Нужна библиотека рендеринга (Mapbox GL JS, MapLibre GL или SDK MapAtlas) и Style JSON, одного тега <img> недостаточно.
• Загрузка шрифтов и глифов. Для отрисовки подписей файлы глифов отдаются отдельно. При первой загрузке это добавляет несколько сетевых запросов.

Сравнение производительности: реальные цифры

Чтобы компромисс был нагляднее, ниже сравнение центрального Амстердама на 14-м уровне зума на публичных тайловых серверах OpenStreetMap (замеры сентября 2026 года):

В масштабе разница проявляется скорее в числе запросов, чем в байтах. Рецензируемое нагрузочное тестирование показало, что при зуме и панорамировании загружались один-два векторных тайла против 40 растровых, хотя векторные тайлы несли больше данных. Для приложения со средней нагрузкой, которое генерирует 10 миллионов запросов тайлов в месяц, меньшее число запросов имеет значение, потому что именно за запросы тайлов выставляет счёт картографический API. На странице тарифов maps API показаны уровни запросов для тайлов, геокодирования и маршрутизации.

Когда использовать растровые тайлы

Растровые тайлы не устарели. Есть понятные сценарии, в которых они остаются правильным выбором.

Интеграция с унаследованными системами. Если вы встраиваете карту в приложение на .NET WebForms, в серверный шаблон Rails или в среду, где под вашим контролем только HTML и базовый JavaScript, растровый слой через Leaflet или OpenLayers проще и надёжнее, чем внедрение WebGL-рендерера.

Генерация изображений карты на сервере. Если нужно отрисовывать снимки карты на сервере Node.js для шаблонов писем, экспорта в PDF или изображений Open Graph, ваш путь лежит через headless-рендеринг растра. Связка node-canvas и растрового источника тайлов работает там, где WebGL недоступен.

Спутниковые и аэрофотоснимки. Аэрофотосъёмка по своей природе растровая. Даже на векторной карте спутниковый слой всегда поставляется растровыми тайлами. Гибридные карты сочетают оба формата: вектор для дорог и подписей, растр для фотоподложки.

Очень простые задачи. Нужна статичная карта с адресом на странице контактов? Простая связка Leaflet и растра OpenStreetMap настраивается за 20 минут и не требует сложного JavaScript. Переход на векторные тайлы ради неинтерактивной метки не оправдан.

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

Выбирайте векторные тайлы для любого современного веб-приложения, где для вас важно следующее:

• Фирменный стиль. Если в дизайн-системе заданы конкретные цвета, карта должна им соответствовать. С векторными тайлами это правка JSON.
• Поддержка тёмной темы. Тёмный Style JSON занимает один конфигурационный файл. Переключение между светлой и тёмной темой выполняется вызовом map.setStyle().
• Чёткость на экранах с высокой плотностью пикселей и Retina. Особенно важно для приложений mobile-first и любого интерфейса, где чёткая отрисовка входит в приоритеты дизайна.
• Плавная работа интерфейса. Непрерывная интерполяция зума и плавный рендеринг сразу заметны пользователям. На их фоне растровые карты в интерактивных сценариях кажутся неповоротливыми.
• Слои визуализации данных. Чтобы добавить тепловую карту, картограмму или слой кластеров на векторную карту, достаточно настройки на клиенте. На растровой карте пришлось бы генерировать новый слой тайлов или прибегать к обходному решению с наложением canvas.
• 3D и наклонная перспектива. Возможны только с векторными тайлами и WebGL.

Быстрый старт: векторные тайлы в MapAtlas

MapAtlas отдаёт векторные тайлы через API, совместимый с Mapbox GL JS. Если вы уже работали с Mapbox GL JS, миграция сводится к смене URL стиля и API-ключа. Если вы начинаете с нуля, ниже полная настройка.

Установка SDK

npm install @mapmetrics/mapmetrics-gl

Или через CDN для проектов на обычном HTML:

<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>

Отрисовка векторной карты

import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const map = new mapmetricsgl.Map({
  container: 'map',         // ID вашего <div>
  style: 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY',
  center: [4.9041, 52.3676], // [долгота, широта], Амстердам
  zoom: 12,
  pitch: 0,     // 0 = вид сверху, 60 = наклон в 3D
  bearing: 0,   // 0 = север сверху, любое другое значение = поворот
});

URL в style указывает на JSON-файл на серверах MapAtlas, в котором описаны все слои, шрифты и источники. Вы также можете разместить собственный Style JSON у себя и управлять каждым визуальным аспектом карты, подробнее в руководстве по визуализации и стилизации карт.

Переключение на тёмную тему во время работы

const LIGHT_STYLE = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_STYLE_ID/style.json&token=YOUR_API_KEY';
const DARK_STYLE  = 'https://gateway.mapmetrics-atlas.net/styles/?fileName=YOUR_DARK_STYLE_ID/style.json&token=YOUR_API_KEY';
let isDark = false;

document.getElementById('toggle-dark').addEventListener('click', () => {
  isDark = !isDark;
  map.setStyle(isDark ? DARK_STYLE : LIGHT_STYLE);
});

Для данных, которые уже есть в кэше, новые запросы тайлов не отправляются. Меняется только стиль: тайлы остаются той же бинарной геометрией, просто перерисованной в новых цветах.

Добавление слоя данных GeoJSON

Одна из самых полезных возможностей векторных тайлов заключается в наложении собственных данных в виде стилизованного слоя:

map.on('load', () => {
  // Добавляем собственный источник данных
  map.addSource('delivery-zones', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [[[4.85, 52.34], [4.95, 52.34], [4.95, 52.40], [4.85, 52.40], [4.85, 52.34]]],
          },
          properties: { zone: 'Zone A', capacity: 150 },
        },
      ],
    },
  });

  // Оформляем его как цветной слой заливки
  map.addLayer({
    id: 'delivery-zones-fill',
    type: 'fill',
    source: 'delivery-zones',
    paint: {
      'fill-color': '#97C70A',
      'fill-opacity': 0.2,
    },
  });

  map.addLayer({
    id: 'delivery-zones-outline',
    type: 'line',
    source: 'delivery-zones',
    paint: {
      'line-color': '#97C70A',
      'line-width': 2,
    },
  });
});

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

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

Если у вас уже есть связка Leaflet и растровых тайлов и вы хотите её обновить, вот минимальный путь миграции:

1. Замените Leaflet на SDK MapAtlas (или на MapLibre GL JS, если предпочитаете полностью открытый рендерер).
2. Замените URL тайлов на URL Style JSON от MapAtlas.
3. Перенесите наложения из слоёв Leaflet в источники и слои GL JS.
4. Проверьте работу в средах без WebGL. Добавьте запасной вариант или понятное сообщение для небольшой доли пользователей, у которых WebGL недоступен.

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

Подробный разбор маркеров, всплывающих окон, поиска адресов и интеграции с React поверх векторной подложки есть в статье Как добавить интерактивные карты на сайт.

О более глубокой стилизации (тёмная тема, фирменные цвета, собственные шрифты, удаление водяного знака) читайте в статье Как оформить карту в фирменном стиле.

А если вы сравниваете MapAtlas с Google Maps по стоимости и возможностям, ключевые различия разобраны в статье MapAtlas vs Google Maps: почему разработчики переходят.

Итог: схема принятия решения

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

Готовы работать с векторными тайлами? Получите бесплатный API-ключ MapAtlas, банковская карта не нужна. С первого дня ключ работает с API тайлов, геокодирования, маршрутизации и изохрон.