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

В Mapbox GL JS прозрачность реализуется на уровне стиля слоя через paint-properties. Каждый тип геометрии имеет собственный набор параметров, отвечающих за визуальную непрозрачность. Управление opacity не является единым глобальным параметром карты — оно распределено по типам слоёв и их визуальным каналам.

Основные свойства прозрачности:

  • fill-opacity — полигоны
  • line-opacity — линии
  • circle-opacity — точки (круговые маркеры)
  • icon-opacity — иконки в символических слоях
  • text-opacity — текстовые подписи
  • raster-opacity — растровые тайлы
  • heatmap-opacity — тепловые карты
  • fill-extrusion-opacity — 3D-экструзии

Каждое свойство принимает значение от 0 до 1, где 0 полностью скрывает элемент, а 1 делает его полностью непрозрачным.

Базовое управление прозрачностью слоя

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

map.setPaintProperty('water-layer', 'fill-opacity', 0.4);

Изменение применяется мгновенно и не требует перерисовки всей карты, только затронутого слоя.

Для возврата к полной непрозрачности:

map.setPaintProperty('water-layer', 'fill-opacity', 1);

Полное скрытие слоя:

map.setPaintProperty('water-layer', 'fill-opacity', 0);

Разделение прозрачности по типам слоёв

Mapbox GL JS не использует универсальную прозрачность слоя. Вместо этого каждый тип рендеринга имеет собственный канал.

Полигоны (fill)

map.setPaintProperty('land-use', 'fill-opacity', 0.6);

Дополнительно часто используется fill-outline-color, который не наследует opacity и управляется отдельно.

Линии (line)

map.setPaintProperty('roads', 'line-opacity', 0.3);

Для сложных эффектов часто комбинируется с:

  • line-color
  • line-width
  • line-blur

Символы (symbol layers)

Символические слои разделяют прозрачность текста и иконок:

map.setPaintProperty('cities', 'text-opacity', 0.5);
map.setPaintProperty('cities', 'icon-opacity', 0.5);

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

Растровые слои

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

map.setPaintProperty('satellite', 'raster-opacity', 0.7);

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

3D-экструзии

map.setPaintProperty('buildings-3d', 'fill-extrusion-opacity', 0.8);

Этот параметр управляет видимостью объёмных объектов, включая эффекты высоты и освещения.

Динамическая прозрачность через выражения

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

Привязка к зуму

map.setPaintProperty('roads', 'line-opacity', [
  'interpolate',
  ['linear'],
  ['zoom'],
  10, 0.2,
  15, 1
]);

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

Привязка к атрибутам данных

map.setPaintProperty('buildings', 'fill-opacity', [
  'case',
  ['==', ['get', 'type'], 'residential'],
  0.3,
  0.8
]);

Разные категории объектов получают разную визуальную плотность.

Управление прозрачностью через feature-state

Feature-state позволяет изменять opacity без пересборки источника данных, что важно для интерактивных эффектов (hover, selection).

map.setFeatureState(
  { source: 'places', id: 123 },
  { hover: true }
);

В стиле:

map.setPaintProperty('places-layer', 'circle-opacity', [
  'case',
  ['boolean', ['feature-state', 'hover'], false],
  1,
  0.4
]);

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

Плавные переходы прозрачности

Mapbox GL JS поддерживает transition-параметры, которые управляют анимацией изменения opacity.

map.setPaintProperty('water', 'fill-opacity-transition', {
  duration: 600,
  delay: 0
});

После этого любое изменение fill-opacity будет анимироваться, а не происходить мгновенно.

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

Прозрачность часто используется совместно с порядком слоёв (layer order). Даже при одинаковых opacity визуальный результат зависит от позиции слоя в стеке.

Типичная схема:

  • базовая подложка (raster)
  • природные объекты (landuse, water)
  • инфраструктура (roads)
  • здания (buildings)
  • подписи (symbol)

Уменьшение opacity на нижних слоях усиливает читаемость верхних.

Комбинирование нескольких каналов прозрачности

Сложные визуальные эффекты достигаются комбинацией нескольких opacity-параметров.

Пример приглушённой карты:

map.setPaintProperty('water', 'fill-opacity', 0.5);
map.setPaintProperty('land', 'fill-opacity', 0.2);
map.setPaintProperty('roads', 'line-opacity', 0.3);
map.setPaintProperty('labels', 'text-opacity', 0.6);

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

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

Хотя opacity кажется простым визуальным параметром, он влияет на compositing pipeline WebGL.

Особенности:

  • изменения opacity не пересоздают геометрию;
  • перерисовывается только фрагмент шейдера;
  • большое количество анимаций opacity может повышать нагрузку на GPU;
  • raster-opacity особенно чувствителен при высоком разрешении тайлов.

Оптимизация заключается в минимизации частых изменений opacity на множестве слоёв одновременно.

Наследование и независимость opacity

Opacity не наследуется между слоями. Изменение прозрачности одного слоя не влияет на другие, даже если они используют один source.

Это позволяет строить многослойные визуализации, где:

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

Практика комбинирования opacity и фильтрации

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

map.setPaintProperty('points', 'circle-opacity', [
  'case',
  ['==', ['get', 'active'], true],
  1,
  0.1
]);

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

Оглавление