Raster source

Raster source представляет собой тип источника данных, в котором карта использует готовые растровые тайлы (изображения), а не векторные геометрии. Каждый тайл — это заранее отрендеренное изображение, обычно PNG или JPEG, полученное с сервера тайлов или из стороннего картографического сервиса.

Основная особенность raster source заключается в том, что визуализация данных уже «зашита» в изображение. Библиотека Mapbox GL JS лишь отображает и стилизует эти изображения на уровне слоя, не имея доступа к внутренней структуре объектов.

Базовая структура raster source

В Mapbox GL JS raster источник добавляется через метод addSource:

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

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

Здесь ключевыми элементами являются:

  • type: 'raster' — определяет тип источника
  • tiles — шаблон URL для получения тайлов
  • tileSize — размер тайла в пикселях (обычно 256 или 512)

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

Raster source может использовать разные типы серверов:

XYZ тайлы

Наиболее распространённый формат:

https://server.com/{z}/{x}/{y}.png
  • {z} — уровень зума
  • {x} и {y} — координаты тайла

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

TileJSON через url

Вместо явного списка tiles можно использовать описание источника:

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

TileJSON может содержать:

  • шаблоны тайлов
  • диапазоны zoom
  • bounds
  • атрибуцию
  • метаданные

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

tiles

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

tiles: [
  'https://tiles.server.com/{z}/{x}/{y}.jpg'
]

Можно указывать несколько серверов для балансировки нагрузки:

tiles: [
  'https://a.tiles.com/{z}/{x}/{y}.png',
  'https://b.tiles.com/{z}/{x}/{y}.png'
]

url

Альтернатива tiles, если используется TileJSON:

url: 'https://example.com/tiles.json'

tileSize

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

tileSize: 256

или

tileSize: 512

512 используется для high-DPI карт и ретины.

Важно: Mapbox GL JS масштабирует тайлы автоматически в зависимости от device pixel ratio.

minzoom и maxzoom

Ограничивают диапазон отображения:

minzoom: 0,
maxzoom: 18
  • minzoom — минимальный уровень детализации
  • maxzoom — максимальный уровень детализации

Если пользователь выходит за пределы диапазона, тайлы перестают запрашиваться.

bounds

Ограничивает область действия источника:

bounds: [-180, -85, 180, 85]

Формат:

[west, south, east, north]

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

scheme

Определяет схему нумерации тайлов:

scheme: 'xyz'

или

scheme: 'tms'
  • xyz — стандарт Google Maps / Mapbox
  • tms — инвертированная ось Y (используется в некоторых GIS-системах)

Добавление raster слоя

Raster source сам по себе не отображается — он требует слоя type: 'raster'.

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

Стилизация raster слоя

В отличие от векторных данных, raster слой имеет ограниченный набор визуальных свойств.

raster-opacity

Прозрачность слоя:

'raster-opacity': 0.7

raster-brightness-min и raster-brightness-max

Контроль яркости:

'raster-brightness-min': 0.2,
'raster-brightness-max': 0.9

Используется для адаптации спутниковых снимков под подложку.

raster-contrast

Контраст изображения:

'raster-contrast': 0.3

raster-saturation

Насыщенность:

'raster-saturation': -0.5

Отрицательные значения «обесцвечивают» карту.

raster-hue-rotate

Поворот цветового тона:

'raster-hue-rotate': 180

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

raster-resampling

Метод интерполяции:

'raster-resampling': 'linear'

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

  • linear — сглаживание (по умолчанию)
  • nearest — резкие пиксели, без интерполяции

Пример комплексной конфигурации

map.addSource('terrain-raster', {
  type: 'raster',
  tiles: [
    'https://terrain.example.com/{z}/{x}/{y}.png'
  ],
  tileSize: 256,
  minzoom: 1,
  maxzoom: 16,
  bounds: [20, 40, 50, 55],
  scheme: 'xyz'
});

map.addLayer({
  id: 'terrain-layer',
  type: 'raster',
  source: 'terrain-raster',
  paint: {
    'raster-opacity': 0.9,
    'raster-brightness-min': 0.1,
    'raster-brightness-max': 1.0,
    'raster-saturation': 0.2,
    'raster-contrast': 0.1
  }
});

Особенности работы raster источников

Raster данные имеют ряд архитектурных ограничений, напрямую влияющих на использование:

Отсутствие семантики

Mapbox GL JS не «понимает», что находится внутри изображения. Нельзя:

  • фильтровать объекты
  • изменять стили отдельных элементов
  • выполнять query по геометрии

Фиксированная детализация

Каждый zoom требует готовых тайлов. Это означает:

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

Высокая нагрузка на сеть

Raster тайлы обычно тяжелее векторных:

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

Кэширование и производительность

Mapbox GL JS использует встроенное кэширование тайлов:

  • тайлы сохраняются в памяти браузера
  • повторные запросы избегаются
  • соседние zoom уровни могут переиспользоваться

Рекомендации:

  • использовать CDN для тайлового сервера
  • оптимизировать размер изображений (WebP при возможности)
  • ограничивать maxzoom для больших наборов данных

Отличие raster source от vector source

Raster source:

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

Vector source:

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

Raster source чаще применяется для:

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

Использование WMS как raster source

WMS-слои часто подключаются через raster tiles:

map.addSource('wms-layer', {
  type: 'raster',
  tiles: [
    'https://server.com/wms?service=WMS&request=GetMap&layers=layer1&bbox={bbox-epsg-3857}&width=256&height=256&format=image/png'
  ],
  tileSize: 256
});

Здесь важно, что сервер возвращает уже готовое изображение, адаптированное под координаты тайла.

Практические сценарии применения

Raster source используется в ситуациях, где:

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

Часто raster layer выступает как базовый слой, поверх которого накладываются vector layers с интерактивными элементами.

Оглавление