Настройка высоты зданий

Визуализация высот в Kepler.gl строится на базе WebGL-слоя deck.gl, где геометрия объектов преобразуется в трёхмерные формы через параметрическую экструзию. Основная концепция заключается в том, что каждое здание или полигон получает числовой атрибут, интерпретируемый как высота, после чего этот атрибут масштабируется и применяется к вертикальной оси Z.

Ключевая особенность подхода — отделение геометрии от визуального представления. Геоданные остаются в плоском виде (GeoJSON, CSV с координатами), а высота вычисляется на этапе рендеринга.

Источники данных высоты

Высота зданий в Kepler.gl может задаваться несколькими способами:

Атрибуты геометрии (GeoJSON)

При использовании GeoJsonLayer высота берётся из свойств объекта:

{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [...]
  },
  "properties": {
    "height": 120
  }
}

На уровне конфигурации слой получает доступ к этому полю через accessor-функции.

Табличные данные (CSV / DataFrame)

В табличных данных высота задаётся как числовая колонка:

name lat lng height
Building A … … 85

Далее Kepler.gl связывает эту колонку с визуальным параметром слоя.

Аггрегированные слои

В слоях типа HexagonLayer и GridLayer высота не берётся из объектов напрямую, а вычисляется:

  • сумма значений
  • среднее значение
  • максимальное значение
  • количество точек

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

Механизм экструзии в deck.gl

Kepler.gl использует deck.gl, где высота реализуется через свойство elevationScale.

Базовая формула:

h_{render} = h_{data} s

где:

  • ( h_{data} ) — исходная высота из данных
  • ( s ) — коэффициент масштабирования
  • ( h_{render} ) — итоговая визуальная высота

Этот подход позволяет унифицировать визуализацию данных разного масштаба (метры, индексы, агрегаты).

Настройка высоты в GeoJsonLayer

GeoJsonLayer поддерживает экструзию полигонов через параметр extruded: true.

Пример конфигурации слоя:

const layer = {
  id: 'buildings',
  type: 'geojson',
  data: buildingsGeojson,
  extruded: true,
  wireframe: false,
  filled: true,
  getElevation: f => f.properties.height,
  elevationScale: 1,
  getFillColor: [200, 100, 50]
};

Ключевые параметры

getElevation

  • определяет источник высоты
  • принимает функцию доступа к данным

elevationScale

  • глобальный множитель
  • используется для усиления или уменьшения эффекта высоты

extruded

  • включает 3D-режим
  • без него геометрия остаётся плоской

Нормализация высоты

В реальных данных значения высоты могут иметь разнородный диапазон. Для предотвращения визуальных искажений применяется нормализация:

h_{norm} =

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

h_{final} = h_{norm} H

где ( H ) — максимальная визуальная высота сцены.

Высота в HexagonLayer и GridLayer

В агрегированных слоях высота формируется не из геометрии, а из статистики точек.

HexagonLayer

Каждый гексагон содержит набор точек. Высота определяется функцией агрегации:

const layer = {
  id: 'hex',
  type: 'hexagon',
  data: points,
  getPosition: d => [d.lng, d.lat],
  getElevationWeight: d => d.value,
  elevationAggregation: 'SUM',
  elevationScale: 10
};

Типы агрегации

  • SUM — сумма значений
  • MAX — максимальное значение
  • MEAN — среднее
  • MIN — минимальное

Влияние карты и проекции

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

Kepler.gl использует Mapbox GL JS, где:

  • камера определяет перспективу
  • tilt влияет на восприятие высоты
  • zoom изменяет плотность и масштаб объектов

При увеличении наклона (pitch) вертикальные различия становятся более выраженными, что усиливает эффект городской структуры.

Работа с масштабированием сцен

В Kepler.gl важную роль играет глобальный параметр сцены:

scenegraph: {
  scale: [1, 1, 1],
  translation: [0, 0, 0]
}

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

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

Цвет и высота как связанная система

Высота часто комбинируется с цветом для усиления читаемости данных.

Типовая схема:

  • низкие здания — холодные цвета
  • высокие здания — тёплые цвета

Пример маппинга:

getFillColor: d => {
  const h = d.properties.height;
  return h > 100 ? [255, 80, 80] : [80, 120, 255];
}

Такой подход создаёт дополнительную визуальную ось информации.

Ограничения точности высоты

Несмотря на гибкость системы, существуют ограничения:

  • данные высоты часто дискретны
  • масштабирование может искажать пропорции
  • WebGL ограничивает сложность геометрии
  • большое количество высоких объектов снижает производительность

Для оптимизации применяются:

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

Связь с картографическим контекстом

Высота в Kepler.gl не существует изолированно. Она всегда интерпретируется в контексте:

  • плотности застройки
  • распределения данных
  • географической зоны
  • масштаба карты

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

Оглавление