Raster слой

Растровый слой (raster) в MapLibre GL JS используется для отображения предварительно отрендеренных изображений карты, поставляемых в виде тайлов (tiles). В отличие от векторных слоёв, где геометрия и стилизация выполняются на стороне клиента, растровый слой работает с готовыми изображениями, что переносит вычислительную нагрузку на сервер тайлов.

Архитектурно raster-слой является обёрткой над источником типа raster, который описывает, откуда загружать изображения и как их интерпретировать в пространстве карты.

Источники данных raster

Основой растрового слоя выступает источник raster source. Он может быть определён через:

  • URL-шаблон тайлов (tiles)
  • TileJSON (url)
  • bounds-ограничения
  • параметры разрешения тайла (tileSize)

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

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

TileJSON источник

map.addSource('terrain', {
  type: 'raster',
  url: 'https://example.com/tiles.json'
});

TileJSON позволяет централизованно описывать параметры тайлового сервиса: URL, zoom диапазоны, формат и метаданные.

Raster слой и стиль

Raster слой в стиле MapLibre GL JS добавляется через addLayer и связывается с ранее созданным источником.

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

Слой raster не содержит геометрических свойств, таких как layout для линий или полигонов, так как отображает уже готовые изображения.

Основные параметры raster слоя

raster-opacity

Определяет прозрачность растрового слоя.

paint: {
  'raster-opacity': 0.7
}

Диапазон значений: от 0 до 1.

raster-hue-rotate

Позволяет вращать цветовой тон изображения.

paint: {
  'raster-hue-rotate': 90
}

Используется для стилистической подгонки спутниковых или подложечных слоёв.

raster-brightness-min и raster-brightness-max

Контролируют яркость растрового изображения.

paint: {
  'raster-brightness-min': 0.2,
  'raster-brightness-max': 0.9
}

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

raster-saturation

Управляет насыщенностью изображения.

paint: {
  'raster-saturation': -0.5
}

Отрицательные значения уменьшают насыщенность, положительные усиливают.

raster-contrast

Регулирует контрастность растрового слоя.

paint: {
  'raster-contrast': 0.3
}

raster-resampling

Определяет метод интерполяции при масштабировании тайлов.

Возможные значения:

  • linear
  • nearest
paint: {
  'raster-resampling': 'linear'
}

linear используется для сглаживания, nearest — для пиксельной точности (например, ретро-карты или пиксель-арт).

Особенности тайловой модели raster

Raster-слои опираются на классическую XYZ-структуру:

/{z}/{x}/{y}.png
  • z — уровень масштабирования
  • x — индекс тайла по горизонтали
  • y — индекс тайла по вертикали

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

TileSize и его влияние

Параметр tileSize определяет физический размер тайла в пикселях.

tileSize: 256

или

tileSize: 512

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

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

Raster слой не пересчитывает геометрию — вместо этого применяются следующие стратегии:

  • масштабирование изображений
  • подгрузка тайлов более высокого zoom уровня
  • интерполяция между уровнями детализации

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

Raster fade transition

Плавность перехода между тайлами регулируется параметром:

paint: {
  'raster-fade-duration': 300
}

Значение задаётся в миллисекундах.

Механизм обеспечивает плавное появление новых тайлов при изменении масштаба.

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

Источник raster может быть ограничен географическими границами:

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

bounds задаётся в формате [west, south, east, north].

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

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

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

Ключевым фактором оптимизации является:

  • правильный выбор tileSize
  • кэширование HTTP-запросов
  • ограничение maxzoom
  • использование сжатых форматов (WebP, JPEG)

Использование нескольких raster слоёв

MapLibre GL JS позволяет накладывать несколько raster слоёв с управлением порядком:

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

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

Это используется для:

  • спутниковых подложек + подписей
  • тепловых карт поверх базовой карты
  • исторических слоёв поверх современных

Комбинирование raster и vector слоёв

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

  • дороги
  • POI
  • геометрия объектов
  • интерактивные элементы

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

Типичные источники raster данных

Raster данные могут поступать из различных систем:

  • спутниковые сервисы
  • ортофотопланы
  • WMS/WMTS сервисы
  • кастомные тайловые серверы
  • статические рендеры карт

Некоторые серверы предоставляют WMS через прокси, конвертирующий запросы в XYZ.

Взаимодействие с WMS/WMTS

WMS можно подключить через шаблон URL:

tiles: [
  'https://server.example.com/wms?service=WMS&request=GetMap&bbox={bbox-epsg-3857}&width=256&height=256&format=image/png'
]

WMTS чаще используется через TileJSON или прямые шаблоны XYZ.

Кэширование и CDN

Raster слой сильно зависит от инфраструктуры доставки:

  • браузерный cache (ETag, Cache-Control)
  • CDN edge caching
  • предварительная генерация тайлов (pre-rendering)

Отсутствие кэширования приводит к резкому снижению производительности при панорамировании карты.

Ограничения raster подхода

Raster слои имеют фундаментальные ограничения:

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

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

Пример полного стиля с raster слоем

const map = new maplibregl.Map({
  container: 'map',
  style: {
    version: 8,
    sources: {
      satellite: {
        type: 'raster',
        tiles: [
          'https://server.example.com/satellite/{z}/{x}/{y}.png'
        ],
        tileSize: 256
      }
    },
    layers: [
      {
        id: 'satellite-layer',
        type: 'raster',
        source: 'satellite',
        paint: {
          'raster-opacity': 1
        }
      }
    ]
  },
  center: [69.5901, 42.3417],
  zoom: 10
});

Поведение при смене стиля

При переключении стиля raster слои:

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

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

Оглавление