Визуальная яркость карты в Mapbox GL JS формируется на нескольких уровнях рендеринга: стилевом, слоёвом и источниковом. В отличие от классической CSS-модели, где яркость управляется глобальными фильтрами, карта разбивается на независимые слои, каждый из которых может иметь собственные параметры освещения.
Ключевое значение имеет тип слоя:
Каждый из этих уровней по-своему влияет на итоговую яркость изображения.
Для растровых тайлов применяется отдельный набор параметров, позволяющих изменять восприятие яркости без изменения исходных данных.
Основные свойства:
raster-brightness-minraster-brightness-maxraster-contrastraster-saturationraster-hue-rotateЭти параметры задаются в paint-секции слоя.
map.setPaintProperty('satellite-layer', 'raster-brightness-min', 0.2);
map.setPaintProperty('satellite-layer', 'raster-brightness-max', 0.8);Изменение диапазона min/max влияет на компрессию светлых
и тёмных областей. Узкий диапазон делает изображение более «плоским»,
широкий — усиливает контраст между светом и тенью.
map.setPaintProperty('satellite-layer', 'raster-contrast', 0.6);
map.setPaintProperty('satellite-layer', 'raster-saturation', -0.3);Снижение насыщенности часто используется для подготовки карты под наложение ярких векторных данных.
Mapbox GL JS поддерживает выражения, что позволяет управлять яркостью в зависимости от зума, времени суток или других параметров состояния карты.
map.setPaintProperty('satellite-layer', 'raster-brightness-max', [
'interpolate',
['linear'],
['zoom'],
5, 0.6,
10, 0.9,
15, 1.0
]);На низких уровнях масштабирования яркость снижается, чтобы уменьшить визуальный шум. При увеличении масштаба детализация возрастает, и допустимо более высокое значение яркости.
Векторные 3D-слои, такие как здания с fill-extrusion,
используют модель сцены, включающую глобальное освещение.
В Mapbox GL JS существует объект light, который
контролирует:
map.setLight({
anchor: 'map',
color: '#ffffff',
intensity: 0.6,
position: [1.5, 180, 80]
});Параметр intensity оказывает прямое влияние на
восприятие яркости вертикальных поверхностей зданий. При увеличении
значения усиливаются блики и тени, создавая более контрастную сцену.
map.setLight({
position: [1.2, 210, 60]
});Изменение азимута и угла возвышения источника света влияет на распределение теней, что визуально воспринимается как изменение яркости отдельных сторон объектов.
Для 3D-геометрии яркость не задаётся напрямую, а формируется через взаимодействие цвета, прозрачности и освещения сцены.
fill-extrusion-colorfill-extrusion-opacityfill-extrusion-ambient-occlusion-intensityfill-extrusion-vertical-gradientmap.setPaintProperty('buildings', 'fill-extrusion-color', '#aaa');
map.setPaintProperty('buildings', 'fill-extrusion-opacity', 0.9);
map.setPaintProperty('buildings', 'fill-extrusion-ambient-occlusion-intensity', 0.4);Ambient occlusion добавляет затемнение в углублениях, усиливая ощущение глубины и косвенно снижая воспринимаемую яркость.
Яркость сцены также зависит от фоновых слоёв:
skyfogЭти элементы формируют общий световой баланс карты.
map.setFog({
range: [0.5, 10],
color: '#c9d5e3',
'horizon-blend': 0.3
});Чем выше плотность fog, тем сильнее визуальное рассеивание света, что снижает контраст и общую яркость сцены.
map.setFog({
'space-color': '#0b1d2a',
'star-intensity': 0.2
});Тёмные значения создают эффект низкой освещённости, имитируя вечернее или ночное время.
В Mapbox GL JS нет единого переключателя яркости сцены, поэтому используется комбинация параметров.
Типичный подход:
function setNightMode(map) {
map.setPaintProperty('satellite-layer', 'raster-brightness-max', 0.4);
map.setPaintProperty('satellite-layer', 'raster-saturation', -0.2);
map.setLight({
intensity: 0.3,
color: '#cfd8dc'
});
map.setFog({
color: '#0a0f1a',
'horizon-blend': 0.6
});
}Ночной режим достигается не снижением «общей яркости», а перераспределением световых характеристик между слоями.
Поскольку глобального параметра brightness не существует, часто применяется имитация через согласованное изменение нескольких слоёв.
const brightness = 0.5;
map.setPaintProperty('satellite-layer', 'raster-brightness-max', brightness);
map.setPaintProperty('water', 'fill-color', `rgba(0, 100, 200, ${brightness})`);
map.setPaintProperty('roads', 'line-opacity', brightness);Такой подход создаёт единое визуальное восприятие яркости, несмотря на различие типов данных.
Динамическая корректировка часто привязывается к состоянию карты:
map.on('pitch', () => {
const pitch = map.getPitch();
const intensity = Math.max(0.3, 1 - pitch / 60);
map.setLight({
intensity
});
});При увеличении наклона сцены свет уменьшается, компенсируя усиление теней.
Помимо прямых параметров brightness, часто используются цветовые трансформации:
map.setPaintProperty('terrain', 'raster-saturation', -0.4);
map.setPaintProperty('terrain', 'raster-contrast', 0.8);
map.setPaintProperty('terrain', 'raster-brightness-min', 0.1);
map.setPaintProperty('terrain', 'raster-brightness-max', 0.9);Комбинация этих параметров позволяет тонко управлять восприятием светотени без изменения данных источника.
В Mapbox GL JS яркость не является единым параметром. Она формируется как результат взаимодействия нескольких систем:
Такое разделение позволяет строить сложные визуальные режимы, где яркость становится производной характеристикой всей сцены, а не отдельным свойством.