Raster источник

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

Raster-данные применяются для подложек карты (tiles basemap), спутниковых снимков, растровых слоёв с высокой детализацией и любых сценариев, где геометрическая интерпретация на клиенте не требуется.

Структура raster-источника

Raster-источник описывается через объект source в конфигурации стиля карты. Основной тип — raster, который использует шаблон URL для загрузки тайлов.

Ключевые параметры:

  • type — всегда "raster"
  • tiles — массив URL-шаблонов тайлов
  • tileSize — размер тайла в пикселях (обычно 256 или 512)
  • minzoom / maxzoom — диапазон доступных зумов
  • bounds — географические границы покрытия источника
  • attribution — обязательная атрибуция данных

Базовая конфигурация raster-источника

map.addSource('raster-source', {
  type: 'raster',
  tiles: [
    'https://tiles.example.com/raster/{z}/{x}/{y}.png'
  ],
  tileSize: 256,
  minzoom: 0,
  maxzoom: 19,
  attribution: '© Example Tiles Provider'
});

В этом примере используется стандартная схема XYZ, где:

  • {z} — уровень зума
  • {x} — координата тайла по оси X
  • {y} — координата тайла по оси Y

Raster-слой (raster layer)

Сам по себе источник не отображается на карте. Для визуализации используется слой типа raster.

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

Основные свойства raster-слоя

  • raster-opacity — прозрачность слоя (0–1)
  • raster-hue-rotate — поворот оттенка изображения
  • raster-brightness-min / max — управление яркостью
  • raster-contrast — контрастность
  • raster-saturation — насыщенность
  • raster-resampling — метод интерполяции (linear / nearest)

Схемы тайлов: XYZ и TMS

Raster-источники поддерживают две основные схемы:

XYZ (по умолчанию)

/{z}/{x}/{y}.png

Ось Y направлена сверху вниз. Используется в большинстве современных картографических сервисов.

TMS

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

В TMS схема ось Y инвертирована относительно XYZ.

Работа с tileSize

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

256x256 (стандарт)

  • Меньший объем данных
  • Быстрая загрузка
  • Больше сетевых запросов

512x512 (retina tiles)

map.addSource('raster-hires', {
  type: 'raster',
  tiles: [
    'https://example.com/tiles/{z}/{x}/{y}@2x.png'
  ],
  tileSize: 512
});
  • Более высокая детализация
  • Меньше запросов
  • Требует больше памяти GPU

Ограничение области отображения

Параметр bounds задаёт прямоугольную область, в пределах которой источник активен.

map.addSource('raster-bounded', {
  type: 'raster',
  tiles: [
    'https://example.com/tiles/{z}/{x}/{y}.png'
  ],
  bounds: [ -180, -85.0511, 180, 85.0511 ]
});

Формат:

[west, south, east, north]

Оптимизация загрузки тайлов

Raster-источники часто становятся узким местом из-за объёма изображений. Оптимизация включает несколько стратегий.

Кэширование

MapLibre автоматически кэширует тайлы в памяти и IndexedDB (в зависимости от окружения).

Prefetch и overzoom

MapLibre может загружать тайлы более высокого зума заранее:

  • улучшает плавность увеличения масштаба
  • увеличивает сетевой трафик

Работа с атрибуцией

Raster-источники часто требуют обязательного указания правообладателя.

attribution: '© OpenStreetMap contributors, © Satellite Provider'

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

Использование нескольких raster-источников

Raster-слои могут накладываться друг на друга:

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

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

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

map.addLayer({
  id: 'labels-layer',
  type: 'raster',
  source: 'labels',
  paint: {
    'raster-opacity': 0.9
  }
});

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

Фильтрация и визуальные эффекты

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

Примеры эффектов:

paint: {
  'raster-brightness-min': 0.2,
  'raster-brightness-max': 0.9,
  'raster-saturation': -0.3,
  'raster-contrast': 0.4
}

Эти параметры часто используются для:

  • приглушения спутниковых снимков
  • создания ночных режимов
  • визуального выделения поверх слоёв данных

Поведение при масштабировании

Raster-источники зависят от доступных уровней zoom:

  • при недостатке тайлов MapLibre использует ближайший доступный уровень
  • возможен эффект размытия при увеличении
  • при наличии high-resolution tiles используется overzoom

Ограничения raster-источников

Raster-подход имеет ряд ограничений:

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

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

Сравнение raster и vector подходов

Raster:

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

Vector:

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

Raster-источники чаще используются как базовый слой, а vector — для интерактивных объектов поверх него.

Использование сторонних тайловых серверов

Raster-источники совместимы с любыми XYZ/TMS серверами:

  • собственные tile server решения
  • облачные провайдеры
  • картографические API

Главное требование — соблюдение URL-шаблона и корректная схема координат.

Обработка ошибок загрузки

MapLibre автоматически обрабатывает:

  • 404 тайлы
  • тайм-ауты сети
  • частичную недоступность серверов

В таких случаях отображается пустой тайл или повтор запроса в зависимости от стратегии загрузчика.

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

Raster-слои рендерятся как текстуры WebGL:

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

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

  • уменьшение tileSize
  • ограничение maxzoom
  • снижение opacity при наложениях
Оглавление