Прозрачность растровых слоев

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

Источники прозрачности в растровых данных

Прозрачность в растровом слое формируется на нескольких уровнях:

1. Альфа-канал изображения

  • PNG и WEBP могут содержать встроенный alpha channel
  • JPEG не поддерживает прозрачность
  • прозрачные пиксели напрямую участвуют в композиции слоёв

2. Серверная генерация тайлов

  • WMS/WMTS сервисы могут возвращать изображения с альфа-каналом
  • некоторые tile server’ы накладывают фон и управляют прозрачностью заранее

3. Клиентская интерполяция прозрачности

  • MapLibre GL JS применяет глобальную прозрачность слоя
  • комбинируется с альфа-каналом тайла

Итоговая визуальная непрозрачность пикселя формируется как произведение альфа-канала изображения и параметра слоя.

Параметр raster-opacity

Основной механизм управления прозрачностью в MapLibre GL JS — свойство raster-opacity.

map.addLayer({
  id: "satellite",
  type: "raster",
  source: "satellite-source",
  paint: {
    "raster-opacity": 0.7
  }
});

Особенности поведения

  • диапазон значений: 0.0 → полностью прозрачный слой
  • 1.0 → полная непрозрачность
  • применяется ко всему слою целиком
  • поддерживает интерполяцию по zoom и выражения

Пример динамической прозрачности

paint: {
  "raster-opacity": [
    "interpolate",
    ["linear"],
    ["zoom"],
    5, 1,
    10, 0.4
  ]
}

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

Композиция слоёв и порядок наложения

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

Основные правила композиции:

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

Пример:

map.addLayer({
  id: "base",
  type: "raster",
  source: "osm"
});

map.addLayer({
  id: "overlay",
  type: "raster",
  source: "satellite",
  paint: {
    "raster-opacity": 0.5
  }
});

Здесь satellite накладывается поверх OSM, создавая смешанную подложку.

Альфа-композиция и GPU-пайплайн

Внутри MapLibre GL JS используется WebGL-композиция, где каждый пиксель проходит стадию blending.

Упрощённая модель:

result = src * alpha + dst * (1 - alpha)

Где:

  • src — пиксель текущего растрового тайла
  • dst — уже отрисованный фон
  • alpha — итоговая прозрачность (raster-opacity × alpha-канал)

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

  • прозрачные слои увеличивают нагрузку на blending stage
  • большое количество полупрозрачных raster layers снижает FPS
  • особенно критично при перекрытии нескольких спутниковых источников

raster-fade-duration и плавность появления

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

paint: {
  "raster-opacity": 1,
  "raster-fade-duration": 300
}

Поведение:

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

При значении 0 переход становится мгновенным, что может вызывать «рваную» подгрузку.

Влияние формата тайлов на прозрачность

PNG

  • поддерживает alpha channel
  • используется для тепловых карт, наложений, масок

JPEG

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

WebP

  • поддерживает alpha
  • более эффективен по размеру при сохранении прозрачности

Цветовые преобразования и восприятие прозрачности

Растровый слой в MapLibre GL JS может дополнительно модифицироваться через paint-свойства:

  • raster-brightness-min
  • raster-brightness-max
  • raster-contrast
  • raster-saturation
  • raster-hue-rotate

Хотя эти параметры не изменяют alpha напрямую, они влияют на визуальное восприятие прозрачности.

Пример:

paint: {
  "raster-opacity": 0.6,
  "raster-brightness-min": 0.2,
  "raster-brightness-max": 0.9,
  "raster-saturation": 0.5
}

При сниженной насыщенности полупрозрачный слой визуально «растворяется» сильнее, чем следует из численного opacity.

Масштабная зависимость прозрачности

Одним из наиболее мощных инструментов является привязка прозрачности к zoom level.

"raster-opacity": [
  "step",
  ["zoom"],
  0.2,
  6,
  0.6,
  10,
  1.0
]

Практические сценарии:

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

Конфликты прозрачности при наложении нескольких raster-сources

При использовании нескольких растровых источников возникают типичные эффекты:

1. «Молочная» карта

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

2. Дублирование альфа-канала

  • tile server уже содержит прозрачность
  • дополнительный raster-opacity приводит к чрезмерному затемнению

3. Z-fighting визуального уровня

  • при одинаковой прозрачности слои «конкурируют» за внимание

Решение обычно заключается в строгом управлении opacity и порядке слоёв.

Особенности работы с ретинальными тайлами

При использовании high-DPI тайлов (retina tiles):

  • прозрачность применяется к уже масштабированному изображению
  • артефакты становятся более заметны при низком raster-opacity
  • blending усиливает шум в полупрозрачных областях

Оптимизационные аспекты

Растровая прозрачность влияет на производительность GPU:

  • blending дороже, чем opaque rendering
  • большое число полупрозрачных слоёв увеличивает fill-rate
  • кэширование текстур менее эффективно при частых изменениях opacity

Практический эффект:

  • opacity-анимации лучше ограничивать небольшим числом слоёв
  • избегается одновременная анимация нескольких raster layers
  • предпочтение отдаётся переключению слоёв вместо плавного наложения в тяжёлых сценах

Смешивание растровых и векторных слоёв

Растровая прозрачность становится особенно значимой при комбинировании с векторной графикой:

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

Типичная структура:

  1. фон (raster base map)
  2. полупрозрачный raster overlay (например, спутник)
  3. векторные дороги и границы
  4. подписи и интерактивные элементы
Оглавление