Raster

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

Архитектура растрового отображения

Растровая модель в Mapbox GL JS строится на принципе тайловой сетки. Карта делится на квадратные тайлы фиксированного размера (обычно 256×256 пикселей), которые подгружаются по мере необходимости в зависимости от текущего масштаба и области просмотра.

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

каждый тайл — это изображение (PNG, JPEG, WebP или аналогичный формат);
тайлы организованы по схеме z/x/y, где z — уровень масштаба;
клиент не интерпретирует геометрию внутри тайла, а лишь отображает изображение;
поддерживается кэширование для ускорения повторных загрузок;
возможна интерполяция между уровнями масштабов.

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

Raster Source: подключение растровых данных

Растровые данные подключаются через источник типа raster.

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

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

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

type: “raster” Определяет тип источника как растровый.

tiles Массив URL-шаблонов тайлов. Поддерживаются переменные:

{z} — уровень масштаба
{x} — координата по оси X
{y} — координата по оси Y

tileSize Размер тайла в пикселях. Чаще всего:

256 — стандарт Web Mercator
512 — используется для HiDPI или ретина-тайлов

bounds (опционально) Ограничивает область отображения источника:

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

minzoom / maxzoom Контроль диапазона масштабов:

minzoom: 0,
maxzoom: 18

Raster Layer: визуализация растрового источника

После добавления источника создаётся слой типа raster.

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

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

raster-opacity

Управляет прозрачностью слоя:

'raster-opacity': 0.7

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

raster-hue-rotate

Изменяет оттенок изображения:

'raster-hue-rotate': 90

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

raster-brightness-min / raster-brightness-max

Регулировка яркости:

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

Позволяет «вытягивать» детали из тёмных или пересвеченных изображений.

raster-saturation

Контроль насыщенности цвета:

'raster-saturation': 0.5

Значение ниже 0 делает изображение ближе к чёрно-белому.

raster-contrast

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

'raster-contrast': 0.8

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

Типы растровых источников

1. Raster Tile Source (тайловые изображения)

Наиболее распространённый тип. Используется для:

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

Пример:

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

2. Raster DEM (цифровая модель рельефа)

Хотя DEM формально относится к отдельному типу источников (raster-dem), он часто рассматривается вместе с растровыми данными из-за схожей природы.

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

3D рельефа
наклонов поверхности
теневого рельефа

Работа с тайловой системой

Mapbox GL JS использует Web Mercator проекцию. Это означает:

широта ограничена примерно ±85.0511°
мир представлен как квадрат
каждый уровень масштаба удваивает детализацию

Количество тайлов на уровне z:

tiles = 2^z × 2^z

На практике:

z = 0 → 1 тайл
z = 1 → 4 тайла
z = 2 → 16 тайлов
z = 10 → 1 048 576 тайлов

Растровые данные на высоких зумах становятся очень объёмными, поэтому важны:

CDN
кеширование браузера
оптимизация размеров изображений

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

Растровый слой не пересчитывает геометрию, а масштабирует пиксели:

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

Контроль качества:

map.setPaintProperty('satellite-layer', 'raster-resampling', 'linear');

Варианты:

linear — плавное сглаживание
nearest — резкое пиксельное отображение

Производительность растровых слоёв

Растровые слои менее требовательны к CPU, но чувствительны к:

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

Ключевые механизмы оптимизации:

1. Ограничение maxzoom

maxzoom: 14

Снижает количество высокодетализированных тайлов.

2. Использование 512px тайлов

tileSize: 512

Уменьшает количество запросов к серверу.

3. Предзагрузка соседних тайлов

Mapbox GL JS автоматически загружает тайлы вокруг viewport, но поведение можно контролировать через параметры карты:

map = new mapboxgl.Map({
  preload: 1
});

Наложение растровых слоёв

Растровые слои часто используются совместно с векторными:

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

Пример:

map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'vector-source',
  'source-layer': 'roads'
});

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

Порядок добавления определяет визуальную иерархию.

Прозрачность и композиция слоёв

Растровые слои часто используются как фон, поэтому прозрачность играет ключевую роль:

'raster-opacity': 0.6

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

Дополнительно применяется:

blend modes (в ограниченном виде)
перекрытие нескольких raster layers
динамическое переключение источников

Динамическая замена растрового источника

Источник можно менять без пересоздания слоя:

map.getSource('satellite-source').setTiles([
  'https://new-server.com/{z}/{x}/{y}.png'
]);

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

переключения стилей
смены провайдера
A/B тестирования тайлов

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

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

memory cache (активные тайлы)
disk cache (HTTP-кеш)
tile cache внутри WebGL контекста

Эффект:

повторное перемещение карты не вызывает новых запросов
ускоряется рендер при возврате к ранее просмотренной области

Ограничения растрового подхода

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

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

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

Смешанные сценарии использования

Типичные архитектуры:

Спутниковая карта с векторным оверлеем

raster: спутниковые тайлы
vector: дороги, POI, границы

Геопространственная аналитика

raster: тепловые карты
vector: административные зоны

Игровые и визуализационные карты

raster: художественный фон
vector: интерактивные объекты

Управление видимостью растрового слоя

map.setLayoutProperty('satellite-layer', 'visibility', 'none');

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

visible
none

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

переключения слоёв
тематических режимов карты
ночного/дневного отображения

Контроль загрузки и событий

Растровые источники поддерживают стандартные события карты:

map.on('load', () => {
  console.log('map loaded');
});

map.on('idle', () => {
  console.log('all tiles loaded');
});

Дополнительно можно отслеживать состояние источника:

map.isSourceLoaded('satellite-source');

Поведение при отсутствии тайлов

Если тайл недоступен:

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

Настройки сервера критичны для стабильности отображения.