Визуальное оформление слоёв в Kepler.gl строится вокруг декларативной
конфигурации visState.layers, где каждый слой описывается
через набор параметров, управляющих геометрией, цветом, прозрачностью,
толщиной линий, радиусами точек и методами агрегации. Архитектура
основана на deck.gl, поэтому стилизация выполняется через
слой-специфичные свойства, а не через CSS или внешние стили.
Каждый слой в Kepler.gl представляет собой объект с полями:
id — уникальный идентификаторtype — тип слоя (point, line, geojson, hexagon, arc,
heatmap и др.)config — конфигурация визуального представленияvisualChannels — маппинг данных на визуальные
свойстваПример логики описания слоя:
config управляет внешним видомvisualChannels связывают поля данных с цветом, размером
и прозрачностьюЦвет в слоях Kepler.gl задаётся через несколько механизмов одновременно: фиксированные значения, палитры и вычисляемые каналы.
Основные подходы к цвету:
color: [r, g, b])colorRange)colorField)Цветовые диапазоны обычно описываются как массив оттенков:
Важным элементом является colorAggregation, определяющий
способ вычисления цвета при агрегации данных (например, среднее значение
или сумма).
Прозрачность слоя задаётся через параметр opacity. Он
влияет на общую визуальную плотность слоя и особенно критичен при
наложении нескольких слоёв.
Дополнительно применяется:
strokeOpacity — прозрачность линийfillOpacity — прозрачность заливкиПри работе с плотными наборами данных снижение opacity позволяет выявлять кластеры и перекрытия объектов.
Размер элементов зависит от типа слоя:
radiusstrokeWidthРазмер может быть:
sizeField)sizeScaleДля точечных слоёв важен параметр минимального и максимального радиуса, ограничивающий визуальное разрастание объектов при больших значениях данных.
Point Layer является одним из наиболее часто используемых. Его визуальные свойства включают:
Особое значение имеет radiusMode, который определяет,
как интерпретируется размер:
При включении 3D режима добавляется параметр высоты, позволяющий визуализировать дополнительную переменную как вертикальное смещение.
Arc Layer используется для отображения связей между точками. Основные параметры:
strokeWidth — толщина дугиsourceColor — цвет началаtargetColor — цвет концаheight — кривизна дугиЦветовая интерполяция между источником и целью может быть линейной или дискретной, в зависимости от конфигурации визуальных каналов.
При работе с большими графами связей важно снижать opacity, чтобы избежать визуальной перегрузки.
GeoJSON слой поддерживает сложные геометрии: полигоны, мультиполигоны, линии.
Основные параметры:
fillColor — цвет заливкиstrokeColor — цвет границыstrokeWidth — толщина линииextruded — включение 3D выдавливанияПри extruded: true высота полигона может зависеть от
поля данных, что позволяет строить объёмные карты плотности или
статистики.
Hexagon Layer выполняет пространственную агрегацию данных в гексагональную сетку.
Ключевые параметры стилизации:
coverage — степень заполнения ячеекelevationScale — масштаб высотыcolorRange — палитра значенийupperPercentile / lowerPercentile — обрезка
выбросовВысота гексагонов часто используется как основная визуальная переменная, отражающая плотность точек.
Heatmap Layer строит тепловую карту плотности точек.
Основные параметры:
radiusPixels — радиус влияния точкиintensity — сила воздействияthreshold — минимальный порог отображенияcolorRange — градиент тепловой шкалыВ отличие от других слоёв, heatmap не отображает дискретные объекты, а формирует непрерывное поле значений.
Kepler.gl использует концепцию визуальных каналов для связывания данных и стиля:
colorField — поле для цветаsizeField — поле для размераheightField — поле для высотыtextField — поле для подписиКаждый канал может иметь:
Это позволяет строить сложные визуализации без изменения исходных данных.
Для корректного отображения данных применяется нормализация:
Масштабирование особенно важно при работе с данными, имеющими большие выбросы, так как без него визуальные элементы становятся несопоставимыми.
Порядок слоёв влияет на итоговую композицию карты. Каждый слой имеет z-index-подобное поведение:
При наложении нескольких полупрозрачных слоёв важна корректная настройка blending mode, определяющего способ смешивания цветов.
Сложные визуальные настройки напрямую влияют на производительность:
Оптимизация достигается через:
Все параметры внешнего вида слоёв хранятся в
visState.layers, который является частью глобального
состояния Kepler.gl. Изменение визуального стиля фактически означает
обновление этого состояния.
Каждое изменение:
Такой подход обеспечивает предсказуемую реактивность и синхронизацию интерфейса с данными.