Hillshade

Hillshade в Mapbox GL JS представляет собой способ визуализации рельефа поверхности с помощью имитации освещения. Основная идея заключается в преобразовании цифровой модели рельефа (DEM, Digital Elevation Model) в полутоновое изображение, где каждая точка получает значение яркости в зависимости от угла падения виртуального света. Это позволяет воспринимать высоту и форму местности интуитивно, даже без изолиний или 3D-модели.

Основа hillshade-слоя — это raster-dem источник, содержащий данные высот.

В Mapbox GL JS чаще всего используются тайлы с кодированием высот, например Terrain-RGB:

map.addSource('terrain-dem', {
  type: 'raster-dem',
  url: 'mapbox://mapbox.terrain-rgb',
  tileSize: 512,
  maxzoom: 14
});

Ключевые особенности DEM:

  • каждое значение пикселя соответствует высоте над уровнем моря;
  • данные оптимизированы для работы в тайловой системе;
  • поддерживается интерполяция между уровнями зума;
  • используются специальные кодировки (RGB → elevation).

Принцип формирования hillshade

Hillshade вычисляется на основе геометрии поверхности и положения источника света.

Алгоритм включает:

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

Упрощённо:

  • крутые склоны → более тёмные области;
  • освещённые поверхности → светлые области;
  • обратные склоны → тени.

Добавление слоя hillshade

В Mapbox GL JS hillshade реализуется как слой типа hillshade, связанный с raster-dem источником.

map.addLayer({
  id: 'hillshade-layer',
  type: 'hillshade',
  source: 'terrain-dem',
  paint: {
    'hillshade-exaggeration': 0.5
  }
});

Основные параметры слоя hillshade

hillshade-exaggeration

Контролирует усиление рельефа.

  • 0 — плоское изображение без рельефа
  • 1 — стандартная интенсивность

  • 1 — усиление перепадов высот

'hillshade-exaggeration': 1.2

hillshade-shadow-color

Цвет теневых областей.

'hillshade-shadow-color': '#2b2b2b'

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

hillshade-highlight-color

Цвет освещённых участков.

'hillshade-highlight-color': '#ffffff'

Позволяет имитировать более яркое освещение.

hillshade-accent-color

Цвет промежуточных участков рельефа.

'hillshade-accent-color': '#6e6e6e'

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

hillshade-illumination-direction

Определяет направление источника света в градусах.

'hillshade-illumination-direction': 315
  • 0° — север
  • 90° — восток
  • 180° — юг
  • 270° — запад

hillshade-illumination-anchor

Определяет систему координат источника света:

  • map — свет фиксирован относительно карты
  • viewport — свет фиксирован относительно экрана
'hillshade-illumination-anchor': 'viewport'

Интеграция с 3D terrain

Hillshade часто используется совместно с 3D-рельефом.

map.setTerrain({
  source: 'terrain-dem',
  exaggeration: 1.5
});

При этом hillshade может накладываться поверх или использоваться как альтернатива 3D-экструзии.

Поведение при масштабировании

Hillshade динамически пересчитывается при изменении масштаба:

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

Важно учитывать:

  • DEM должен поддерживать нужный maxzoom;
  • слишком высокий exaggeration на больших масштабах может приводить к визуальному шуму.

Производительность и оптимизация

Работа hillshade зависит от плотности DEM-данных.

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

  • размер tileSize (256 vs 512);
  • максимальный уровень зума;
  • наличие terrain и дополнительных слоёв;
  • количество одновременно отображаемых растровых источников.

Рекомендации:

  • использовать 512px тайлы для баланса качества и скорости;
  • ограничивать maxzoom для DEM;
  • избегать одновременного использования нескольких тяжелых raster-dem источников.

Комбинирование с другими слоями

Hillshade редко используется изолированно. Типичные комбинации:

С векторными слоями

map.addLayer({
  id: 'roads',
  type: 'line',
  source: 'vector-source',
  'source-layer': 'roads'
});

Рельеф подчеркивает структуру дорожной сети.

С землепользованием

  • леса
  • водоёмы
  • сельскохозяйственные зоны

Hillshade усиливает читаемость границ природных объектов.

С цветовой подложкой

Часто применяется мягкая цветовая база + hillshade поверх:

  • базовый слой задаёт тип территории;
  • hillshade добавляет глубину.

Особенности визуального восприятия

Hillshade не является точной 3D-моделью, его цель — визуальная интерпретация рельефа.

Характерные эффекты:

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

Типичные ошибки при настройке

  • слишком высокий hillshade-exaggeration, приводящий к «рваному» рельефу;
  • некорректное направление освещения, ухудшающее читаемость;
  • использование DEM низкого разрешения на высоких зумах;
  • отсутствие оптимизации maxzoom у raster-dem источника.

Практическая структура конфигурации

Типичная настройка слоя включает три элемента:

  1. источник DEM
  2. terrain (опционально)
  3. hillshade слой
map.on('load', () => {
  map.addSource('terrain-dem', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.terrain-rgb',
    tileSize: 512
  });

  map.setTerrain({
    source: 'terrain-dem',
    exaggeration: 1.3
  });

  map.addLayer({
    id: 'hillshade',
    type: 'hillshade',
    source: 'terrain-dem',
    paint: {
      'hillshade-exaggeration': 0.8,
      'hillshade-shadow-color': '#1a1a1a',
      'hillshade-highlight-color': '#ffffff',
      'hillshade-accent-color': '#888888',
      'hillshade-illumination-direction': 315,
      'hillshade-illumination-anchor': 'viewport'
    }
  });
});

Роль hillshade в картографической визуализации

Hillshade выполняет функцию промежуточного слоя между 2D-картой и полноценной 3D-визуализацией. Он усиливает восприятие рельефа без значительных затрат на вычисление геометрии в браузере и остаётся одним из наиболее эффективных способов отображения высот в веб-картографии.

Оглавление