Ретина тайлы

Высокая плотность пикселей и принцип devicePixelRatio

Современные дисплеи используют увеличенную плотность пикселей, выражаемую через devicePixelRatio. На экранах Retina и аналогичных им устройств один CSS-пиксель соответствует нескольким физическим пикселям. Это приводит к визуальному эффекту размытости при использовании стандартных тайлов 256×256, поскольку один логический пиксель карты растягивается на несколько физических пикселей экрана.

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

Ретина тайлы и удвоенное разрешение

Ретина тайлы представляют собой изображения увеличенного разрешения, чаще всего 512×512 пикселей при логическом размере 256×256. Они маркируются суффиксом @2x:

/tiles/12/2200/1345@2x.png

или в стиле URL-шаблона:

https://tiles.example.com/{z}/{x}/{y}@2x.png

При этом карта продолжает работать с теми же координатами тайловой сетки, но получает изображение с удвоенной детализацией.

Ключевая особенность:

  • логический размер тайла остаётся 256×256
  • физическое разрешение увеличено до 512×512
  • браузер отображает тайл без дополнительного масштабирования

Поддержка Retina в рендеринге карт

Библиотека MapLibre GL JS автоматически учитывает плотность пикселей устройства через параметры контекста WebGL и внутренние настройки рендера.

Основной механизм основан на значении devicePixelRatio, которое применяется к:

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

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

Raster-тайлы и масштабирование изображения

При использовании растровых источников (raster) важным параметром становится tileSize.

Типовые комбинации:

  • tileSize: 256 — стандартные тайлы
  • tileSize: 512 — ретина-тайлы

При использовании 512×512 тайлов карта воспринимает их как логические 256×256, что позволяет избежать масштабирования и потери качества.

Пример конфигурации источника:

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

Несмотря на фактическое разрешение 512×512, параметр tileSize: 256 сообщает движку, что тайл следует интерпретировать как стандартный логический размер.

Автоматическое определение плотности пикселей

В MapLibre GL JS предусмотрена поддержка автоматического учёта Retina-дисплеев через внутренние механизмы WebGL.

Поведение можно обобщить следующим образом:

  • devicePixelRatio = 1 → стандартное качество
  • devicePixelRatio = 2 → повышенное разрешение
  • devicePixelRatio > 2 → дополнительное сглаживание и масштабирование

При этом движок может адаптировать:

  • размер framebuffer
  • разрешение текстур
  • уровень детализации тайлов

Vector tiles и независимость от разрешения

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

При отрисовке:

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

Ретина-режим влияет только на:

  • антиалиасинг линий
  • сглаживание текста
  • точность растеризации WebGL

Таким образом, векторные тайлы по своей природе «ретина-готовы» без необходимости дополнительных версий данных.

Управление pixelRatio в конфигурации карты

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

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  pixelRatio: window.devicePixelRatio
});

Такой подход позволяет:

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

При уменьшении pixelRatio можно снизить нагрузку на GPU, но потерять визуальную чёткость.

Поведение raster-dem и hillshade на Retina-дисплеях

При использовании DEM-данных (цифровых моделей рельефа) влияние Retina особенно заметно:

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

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

Кэширование и сетевые последствия

Ретина-тайлы увеличивают объём загружаемых данных примерно в 2–4 раза, в зависимости от схемы покрытия:

  • стандартный тайл: 10–20 KB (PNG/JPEG)
  • @2x тайл: 30–80 KB

Это влияет на:

  • скорость первичной загрузки карты
  • нагрузку на CDN
  • кэш браузера

Оптимизация обычно достигается через:

  • адаптивную подгрузку по devicePixelRatio
  • использование векторных тайлов вместо растровых
  • сжатие форматов (WebP, AVIF для raster tiles)

Комбинирование стандартных и Retina-тайлов

Часто используется гибридный подход:

  • для мобильных Retina-экранов — @2x тайлы
  • для десктопов с низким DPR — стандартные тайлы

Логика выбора может реализовываться через URL-параметры:

const dpr = window.devicePixelRatio > 1 ? '@2x' : '';

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

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

Влияние Retina на производительность WebGL-контекста

Увеличение devicePixelRatio приводит к росту:

  • размера framebuffer
  • количества пиксельных операций fragment shader
  • потребления видеопамяти

Особенно критично это при:

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

Баланс между качеством и производительностью достигается через ограничение максимального pixelRatio или динамическое снижение качества при слабом GPU.

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

Типовые сценарии:

  • аналитические карты: приоритет производительности, возможно снижение DPR
  • навигационные карты: баланс качества и скорости
  • картографические витрины: максимальное качество с @2x тайлами
  • embedded-карты: адаптивная стратегия по устройству

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

Оглавление