Fill-extrusion-height

В свойствах слоя типа fill-extrusion в Mapbox GL JS параметр fill-extrusion-height определяет вертикальную протяжённость 3D-объектов, задавая их высоту в метрах или в единицах, интерпретируемых в контексте источника данных. Это ключевой атрибут при построении трёхмерных визуализаций зданий, рельефных объектов и любых полигонов, которые должны быть «выдавлены» вверх относительно поверхности карты.

fill-extrusion-height управляет верхней гранью экструдированного полигона. Каждый полигон, используемый в слое fill-extrusion, превращается в объемную геометрическую фигуру, где:

• нижняя грань задаётся уровнем земли или параметром fill-extrusion-base
• верхняя грань определяется значением fill-extrusion-height

Фактически, высота вычисляется как разница между этими двумя значениями, если оба параметра заданы.

Если задан только fill-extrusion-height, объект «вырастает» от нулевого уровня.

Типы значений и data-driven стилизация

Параметр поддерживает несколько типов значений:

• константа — одинаковая высота для всех объектов слоя
• интерполяция (interpolate) — плавное изменение высоты в зависимости от зума или атрибутов
• шаблонные выражения (get, case, match) — динамическое вычисление на основе свойств данных

Пример статической высоты:

'fill-extrusion-height': 50

В этом случае все объекты будут иметь высоту 50 единиц.

Использование свойств данных

Одной из ключевых возможностей является привязка высоты к атрибутам GeoJSON или vector tiles. Например, если в данных присутствует поле height, его можно использовать напрямую:

'fill-extrusion-height': ['get', 'height']

Это превращает карту в полноценную 3D-модель, где каждый объект имеет индивидуальную высоту.

Интерполяция и масштабирование

Часто высота должна изменяться в зависимости от уровня масштаба. Например, здания могут визуально «расти» при увеличении зума:

'fill-extrusion-height': [
  'interpolate',
  ['linear'],
  ['zoom'],
  10, 0,
  15, ['get', 'height']
]

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

Связь с fill-extrusion-base

fill-extrusion-height почти всегда используется совместно с fill-extrusion-base. Разница между ними формирует «толщину» объекта.

'fill-extrusion-base': ['get', 'min_height'],
'fill-extrusion-height': ['get', 'height']

Если base равен 10, а height равен 60, итоговая высота объекта составит 50 единиц.

Такой подход позволяет моделировать:

• здания с этажностью
• геологические слои
• ступенчатый рельеф

Работа с единицами измерения

Высота в fill-extrusion-height интерпретируется в метрах, если используется стандартная схема данных Mapbox Streets. Однако фактическая интерпретация зависит от:

• используемой проекции
• источника данных
• настройки mapbox-gl в конкретной реализации

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

Выражения и условная логика

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

Условное назначение высоты

'fill-extrusion-height': [
  'case',
  ['>', ['get', 'population'], 100000], 200,
  ['>', ['get', 'population'], 50000], 120,
  60
]

Здесь высота зданий зависит от плотности населения или любого числового признака.

Сопоставление категорий

'fill-extrusion-height': [
  'match',
  ['get', 'type'],
  'residential', 50,
  'commercial', 120,
  'industrial', 80,
  40
]

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

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

Использование fill-extrusion-height напрямую связано с GPU-рендерингом. Однако сложные выражения могут влиять на производительность:

• простые числовые значения обрабатываются быстрее
• get-выражения требуют доступа к атрибутам тайлов
• вложенные interpolate и case увеличивают нагрузку на CPU при пересчёте стиля

Оптимизация достигается за счёт:

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

Взаимодействие с освещением и визуальным восприятием

Высота объектов напрямую влияет на работу световых эффектов в 3D-сцене:

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

При использовании наклонов карты (pitch) значение fill-extrusion-height становится ключевым фактором глубины сцены.

Комбинация с zoom-dependent styling

Высота может изменяться не только от данных, но и от масштаба:

'fill-extrusion-height': [
  'interpolate',
  ['exponential', 1.5],
  ['zoom'],
  12, 0,
  16, ['get', 'height']
]

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

Практика работы с нулевой высотой

Если значение fill-extrusion-height равно 0:

• объект полностью исчезает из 3D-вида
• остаётся только основание (если задан fill-extrusion-base)
• используется для фильтрации или постепенного отображения объектов

Это часто применяется в анимациях появления зданий.

Типичные ошибки при использовании

Некорректные настройки высоты приводят к визуальным артефактам:

• отрицательные значения могут быть проигнорированы или приведены к 0
• отсутствие согласования с fill-extrusion-base создаёт «обрезанные» здания
• использование строк вместо чисел приводит к некорректной интерпретации выражений

Пример ошибки:

'fill-extrusion-height': "100"

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

Высотные данные в реальных сценариях

На практике fill-extrusion-height используется для:

• визуализации городской застройки
• анализа урбанистической плотности
• 3D-карт рельефа
• моделирования инфраструктуры

В сочетании с источниками данных вроде vector tiles слой превращается в динамическую 3D-сцену, где каждый объект имеет индивидуальную геометрию.

Связь с источниками данных

Качество отображения высоты напрямую зависит от структуры данных:

• GeoJSON позволяет быстро задавать кастомные значения
• Vector tiles обеспечивают масштабируемость
• заранее подготовленные атрибуты повышают производительность

При отсутствии поля высоты используется fallback-значение или выражение по умолчанию.

Поведение при зуме и пересчёте стиля

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

• значения fill-extrusion-height могут интерполироваться
• GPU пересобирает геометрию без перезагрузки данных
• визуальные переходы остаются плавными при корректной настройке выражений

Это делает слой подходящим для интерактивных 3D-сцен без заметных лагов.

Влияние на восприятие масштаба города

Высота объектов определяет читаемость городской структуры:

• низкие значения создают «плоскую» карту
• реалистичные значения формируют архитектурную сцену
• преувеличенные высоты используются для аналитической визуализации

Таким образом, fill-extrusion-height становится не только техническим параметром, но и инструментом визуального кодирования данных.