Arc Layer — один из наиболее выразительных слоёв визуализации в Kepler.gl, предназначенный для отображения направленных связей между географическими точками. Он используется для анализа потоков: перемещений людей, грузов, транспорта, сетевых взаимодействий, миграций и любых других данных, где важны связи «источник → назначение».
Arc Layer строится на основе пар координат и визуализирует их в виде дуг, создающих эффект трёхмерного потока над картой. В отличие от простых линий, дуги добавляют восприятие направления, масштаба и интенсивности связи.
Arc Layer требует набор данных, где каждая запись содержит минимум две географические точки:
Типичная структура объекта:
{
sourceLat: 40.7128,
sourceLng: -74.0060,
targetLat: 34.0522,
targetLng: -118.2437,
value: 100
}Поле value не является обязательным, но широко
используется для управления толщиной, цветом или яркостью дуги.
Arc Layer строит кривую между двумя точками с использованием интерполяции по сфере. Это означает, что линия не является прямой в экранных координатах, а учитывает кривизну Земли.
Основные особенности:
Arc Layer настраивается через объект слоя в конфигурации Kepler.gl:
const arcLayer = {
id: 'arc-layer',
type: 'arc',
config: {
dataId: 'flights',
label: 'Flights Routes',
color: [255, 140, 0],
columns: {
lat0: 'sourceLat',
lng0: 'sourceLng',
lat1: 'targetLat',
lng1: 'targetLng'
},
getSourceColor: [0, 128, 255],
getTargetColor: [255, 0, 128],
getWidth: 2,
getHeight: 1
}
};Определяет соответствие данных координатам:
Эта абстракция позволяет использовать любые названия полей в датасете, не привязываясь к фиксированной структуре.
Позволяют задавать градиент дуги:
getSourceColor: [0, 200, 255],
getTargetColor: [255, 100, 0]Результат — плавный переход цвета вдоль линии, который визуально подчёркивает направление движения.
Определяет толщину дуги.
Может быть:
Пример динамической толщины:
getWidth: d => Math.sqrt(d.value)Контролирует высоту подъёма дуги над поверхностью карты.
Высота часто используется для усиления визуальной читаемости пересекающихся потоков.
Arc Layer поддерживает несколько подходов к окрашиванию:
Один цвет для всех дуг:
color: [255, 255, 255]getSourceColor: [0, 255, 0],
getTargetColor: [255, 0, 0]getSourceColor: d => (d.value > 100 ? [255, 0, 0] : [0, 255, 0])Arc Layer чувствителен к масштабу значений. Поле value
часто используется для:
Пример нормализации:
getWidth: d => d.value / 50Для больших датасетов применяется логарифмическое преобразование:
getWidth: d => Math.log(d.value + 1)Arc Layer может работать с большим количеством связей, однако нагрузка растёт при увеличении числа дуг.
Факторы, влияющие на производительность:
Рекомендуемые подходы оптимизации:
Arc Layer часто комбинируется с другими слоями Kepler.gl:
Используется для отображения узлов сети:
Arc Layer визуализирует связи между ними.
Используется для анализа плотности источников и целей, дополняя потоковую визуализацию.
Может использоваться для маркировки ключевых точек маршрутов.
Arc Layer поддерживает визуальную передачу направления движения через:
Пример имитации движения:
getSourceColor: [0, 0, 255],
getTargetColor: [0, 255, 255],Дополнительная динамика достигается через обновление
value во времени.
Arc Layer использует сферическую интерполяцию:
Это позволяет сохранять корректную форму на глобальных расстояниях.
При визуализации глобальных потоков (например, авиарейсов) возникает проблема перекрытия дуг.
Подходы решения:
Пример прозрачности:
opacity: 0.5Arc Layer используется в задачах анализа потоков:
Arc Layer может работать с временными данными, если:
Пример:
{
sourceLat: 51.5,
sourceLng: -0.1,
targetLat: 48.8,
targetLng: 2.3,
timestamp: 1620000000
}Далее данные можно анимировать через фильтры Kepler.gl.
Arc Layer адаптируется к уровню zoom:
Это обеспечивает стабильную визуальную читаемость при любом уровне приближения.
Внутри Kepler.gl Arc Layer преобразуется в набор WebGL-геометрий:
Это позволяет обрабатывать тысячи дуг в реальном времени.
Некоторые дополнительные параметры:
{
greatCircle: true,
billboard: false,
opacity: 0.8
}