Multiply, screen, overlay

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

Ключевое свойство, отвечающее за поведение смешивания:

{
  id: 'layer-id',
  type: 'fill',
  source: 'source-id',
  paint: {
    'fill-color': '#ff0000',
    'fill-opacity': 0.8,
    'fill-outline-color': '#000000'
  },
  'layout': {},
  'paint': {
    'fill-color': '#ff0000',
    'fill-opacity': 0.7
  },
  'metadata': {},
  'source-layer': 'layer-name',
  'minzoom': 0,
  'maxzoom': 22,
  'mix-blend-mode': 'multiply'
}

Свойство mix-blend-mode применяется к слою и влияет на то, как он композитится с уже отрисованной сценой. Поддерживаемые значения включают multiply, screen, overlay и другие режимы из спецификации CSS Compositing and Blending Level 1.

Multiply

Режим Multiply основан на умножении цветовых каналов верхнего и нижнего слоёв. В результате изображение становится темнее, а белый цвет фактически становится прозрачным по смыслу композиции.

Математическая модель:

итоговый цвет = A × B

Где:

A — цвет верхнего слоя
B — цвет нижнего слоя

Поведение в картографических задачах

Multiply применяется для создания эффекта затемнения территорий, наложения плотности данных и визуализации градиентных зон.

Типичные сценарии:

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

map.addLayer({
  id: 'heat-overlay',
  type: 'fill',
  source: 'regions',
  paint: {
    'fill-color': 'rgba(255, 0, 0, 0.6)'
  },
  'mix-blend-mode': 'multiply'
});

Характер визуального результата

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

Screen

Режим Screen является противоположностью Multiply по визуальному эффекту. Он осветляет изображение, комбинируя значения каналов так, что тёмные области становятся менее заметными.

Математическая модель:

итоговый цвет = 1 − (1 − A) × (1 − B)

Поведение в геовизуализации

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

Типичные сценарии:

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

map.addLayer({
  id: 'routes',
  type: 'line',
  source: 'routes-source',
  paint: {
    'line-color': '#00ffff',
    'line-width': 3
  },
  'mix-blend-mode': 'screen'
});

Характер визуального результата

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

Overlay

Режим Overlay комбинирует свойства Multiply и Screen в зависимости от яркости базового слоя. Он усиливает контраст, сохраняя детали как в светлых, так и в тёмных областях.

Логика поведения:

если нижний слой тёмный → применяется Multiply
если нижний слой светлый → применяется Screen

Применение в картографических слоях

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

Типичные сценарии:

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

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

Визуальные особенности

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

Взаимодействие слоёв и порядок рендеринга

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

Ключевые факторы влияния:

порядок добавления слоёв (addLayer)
тип слоя (fill, line, circle, raster)
прозрачность (opacity)
базовый стиль карты

Пример комбинирования:

map.addLayer({
  id: 'base-data',
  type: 'fill',
  source: 'data',
  paint: {
    'fill-color': '#ffcc00',
    'fill-opacity': 0.5
  },
  'mix-blend-mode': 'multiply'
});

map.addLayer({
  id: 'highlight',
  type: 'line',
  source: 'data',
  paint: {
    'line-color': '#ffffff',
    'line-width': 2
  },
  'mix-blend-mode': 'screen'
});

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

Использование mix-blend-mode переводит слой в режим дополнительной композиции на GPU. Это увеличивает нагрузку на рендеринг, особенно при большом количестве слоёв с высокой плотностью геометрии.

Факторы влияния:

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

Особенности оптимизации:

raster-слои с blend mode дешевле, чем сложные vector-fill слои
большое количество прозрачных слоёв может снижать FPS
overlay и screen чаще требуют больше вычислений, чем multiply

Поведение с прозрачностью

mix-blend-mode тесно связан с opacity. При изменении прозрачности меняется вклад слоя в итоговую композицию.

Пример:

paint: {
  'fill-color': '#ff0000',
  'fill-opacity': 0.4
}

В сочетании с multiply:

эффект затемнения становится менее агрессивным
границы смешивания становятся мягче

В сочетании с screen:

эффект свечения уменьшается
теряется яркость акцентных зон

Работа с тематическими слоями

В аналитических картах blend modes часто используются для наложения данных поверх базовой подложки.

Пример структуры:

базовый слой: mapbox-streets
аналитический слой: плотность событий
визуальный слой: highlight зон

map.addLayer({
  id: 'event-density',
  type: 'circle',
  source: 'events',
  paint: {
    'circle-radius': 6,
    'circle-color': '#ff3300',
    'circle-opacity': 0.6
  },
  'mix-blend-mode': 'overlay'
});

Overlay позволяет сохранить читаемость карты, не уничтожая детали подложки.

Цветовые взаимодействия и восприятие данных

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

Multiply:

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

Screen:

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

Overlay:

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

Ограничения применения

Некоторые особенности поведения:

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

Композиция нескольких режимов

В сложных визуализациях допускается комбинация разных blend modes в одном проекте.

Пример:

Multiply для фоновой аналитики
Screen для маркеров
Overlay для рельефа

map.addLayer({
  id: 'analysis',
  type: 'fill',
  source: 'data',
  paint: {
    'fill-color': '#3366ff',
    'fill-opacity': 0.5
  },
  'mix-blend-mode': 'multiply'
});

map.addLayer({
  id: 'points',
  type: 'circle',
  source: 'points',
  paint: {
    'circle-color': '#ffffff',
    'circle-radius': 4
  },
  'mix-blend-mode': 'screen'
});