В контексте трехмерной визуализации карт в Mapbox GL JS ключевым механизмом управления восприятием высот является параметр terrain exaggeration, отвечающий за масштабирование цифровой модели рельефа по вертикали. Он позволяет изменять визуальную «высоту» поверхности без изменения исходных данных DEM, создавая более читаемую или, наоборот, более реалистичную географическую сцену.
Рельеф в Mapbox GL JS строится на основе источников DEM (Digital
Elevation Model), подключаемых через raster-dem source. Эти
данные представляют собой регулярную сетку высот, которая
интерполируется движком WebGL для построения непрерывной
поверхности.
Базовая активация рельефа выполняется через метод
setTerrain:
map.on('load', () => {
map.setTerrain({
source: 'mapbox-dem',
exaggeration: 1.5
});
});
Здесь параметр exaggeration управляет коэффициентом
вертикального масштабирования.
Параметр exaggeration влияет исключительно на визуальное представление высот, не изменяя исходные данные DEM. Это означает:
При значении:
1.0 — рельеф отображается без искажений;> 1.0 — рельеф визуально «поднимается», усиливается
контрастность форм;< 1.0 — рельеф сглаживается, высоты становятся менее
выраженными.Фактически параметр выполняет линейное преобразование:
z’ = z k
где:
z — исходная высота из DEM,k — значение exaggeration,z' — визуализированная высота.Одним из ключевых свойств рельефа в Mapbox GL JS является возможность изменения параметра без пересоздания слоя карты:
map.setTerrain({
source: 'mapbox-dem',
exaggeration: 2.0
});
Изменение применяется мгновенно, так как перерасчёт происходит в GPU-пайплайне.
Динамическая корректировка часто используется в следующих сценариях:
Exaggeration влияет не только на геометрию, но и на световое восприятие сцены. В связке с системой освещения:
Особенно заметен эффект при использовании light
параметров карты:
map.setLight({
anchor: 'map',
intensity: 0.6,
position: [1.15, 210, 30]
});
При увеличенном exaggeration даже небольшие изменения освещения создают выраженные визуальные переходы.
Эффект рельефа становится максимально выраженным при наклонной камере
(pitch):
map.easeTo({
pitch: 60,
bearing: -20,
zoom: 12
});
Комбинация факторов:
pitchexaggerationсоздаёт выраженный 3D-эффект с глубокими тенями и читаемыми формами рельефа.
При нулевом наклоне камеры эффект exaggeration почти теряет выразительность, так как отсутствует перспектива.
В Mapbox GL JS вычисление рельефа выполняется на стороне GPU, что делает exaggeration относительно дешёвой операцией с точки зрения CPU.
Однако существуют факторы влияния на производительность:
Оптимизация достигается через:
Параметр exaggeration применяется поверх уже загруженного источника:
map.addSource('mapbox-dem', {
type: 'raster-dem',
url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
tileSize: 512,
maxzoom: 14
});
Важно, что качество DEM напрямую влияет на визуальный результат:
При работе с рельефом в Mapbox GL JS часто возникают следующие проблемы:
1. Чрезмерное значение коэффициента
Сильное увеличение (например, > 3.0) приводит к:
2. Несогласованность с 3D-объектами
Если здания или модели не адаптированы к terrain, возникает эффект «плавающих» объектов.
3. Игнорирование масштаба карты
На малых zoom exaggeration может выглядеть чрезмерно агрессивно, так как географические расстояния визуально сжаты.
Mapbox GL JS поддерживает выражения, позволяющие динамически изменять параметры в зависимости от zoom:
exaggeration: [
'interpolate',
['linear'],
['zoom'],
5, 0.5,
10, 1.5,
14, 2.5
]
Такой подход позволяет:
Exaggeration используется как инструмент стилизации:
В связке с атмосферными эффектами (fog, sky) параметр становится частью общей композиции сцены, формируя восприятие глубины и масштаба пространства.