Kepler.gl предоставляет слой Trip layer как специализированный инструмент для визуализации перемещений объектов во времени. Он предназначен для отображения траекторий движения, где каждая точка пути связана с временной меткой, а вся линия превращается в анимированный след, позволяющий анализировать динамику перемещения.
Trip layer работает с набором данных, в котором каждая запись описывает отдельный маршрут. Основная структура включает:
Ключевая особенность заключается в том, что путь интерпретируется не как статическая линия, а как временная последовательность сегментов.
Типичный формат данных:
const data = [
{
route: [
[-73.9851, 40.7589],
[-73.9840, 40.7540],
[-73.9820, 40.7485]
],
timestamps: [0, 5, 12]
}
];Здесь route определяет геометрию, а
timestamps синхронизируют движение во времени.
Trip layer строится поверх модели временного прогресса. Для каждого маршрута определяется:
Каждый кадр анимации пересчитывает видимый сегмент пути, создавая эффект движения объекта.
В основе лежит интерполяция между точками:
Trip layer в Kepler.gl настраивается через набор параметров, определяющих визуализацию и поведение анимации.
Ключевые параметры:
getPath — функция извлечения геометрии маршрутаgetTimestamps — функция извлечения временных метокcurrentTime — глобальное текущее время анимацииtrailLength — длина «хвоста» маршрутаopacity — прозрачность слояwidthMin и widthMax — диапазон толщины
линииПример конфигурации:
const tripLayer = {
id: 'trip-layer',
type: 'trip',
data: trips,
getPath: d => d.route,
getTimestamps: d => d.timestamps,
currentTime: 12,
trailLength: 120,
opacity: 0.8,
widthMinPixels: 2,
widthMaxPixels: 6
};Временная шкала является центральным элементом Trip layer. Она определяет, какая часть маршрута уже «произошла».
Механика работы:
currentTime изменяется либо автоматически (анимация),
либо вручнуюcurrentTimeОсобое значение имеет параметр trailLength, который
контролирует длину следа позади текущей позиции объекта. Это позволяет
моделировать:
Для плавного отображения движения Trip layer выполняет интерполяцию между точками маршрута.
Если точка A имеет время t1, а точка B — t2, то промежуточная позиция вычисляется как:
Это позволяет избежать «рваного» движения при редких данных.
В более сложных сценариях применяется:
Trip layer использует градиентную визуализацию для отображения истории движения.
Обычно применяются следующие визуальные принципы:
Цвет может быть:
Толщина линии часто зависит от масштаба или значений данных:
Trip layer поддерживает взаимодействие с пользователем через события:
При взаимодействии можно получить:
Это позволяет строить интерфейсы анализа:
При большом количестве маршрутов Trip layer может становиться вычислительно дорогим, так как каждый кадр требует пересчета видимых сегментов.
Основные методы оптимизации:
Особенно важно контролировать количество точек в каждом маршруте, так как сложность растет линейно от числа сегментов.
Trip layer применяется в задачах, где важно анализировать движение во времени:
В каждом из этих случаев ключевым является сочетание геометрии и временной динамики.
При отображении множества маршрутов важно учитывать:
Каждый объект может иметь собственный временной диапазон, но визуально они приводятся к общей шкале через нормализацию.
Дополнительные параметры позволяют тонко управлять отображением:
fadeTrail — постепенное исчезновение следаshadowEnabled — визуальная тень маршрутаbillboard — ориентация линии относительно камерыgreatCircle — построение дуг по поверхности ЗемлиЭти параметры особенно важны при работе на глобальных картах, где искажения проекции становятся заметными.
Trip layer адаптируется к уровню zoom:
Это обеспечивает стабильную читаемость даже при большом количестве данных.
Ключевая концепция Trip layer заключается в объединении двух измерений:
Их совместная интерпретация превращает статическую линию в динамическую модель движения, где каждый сегмент существует только в определенный момент времени.
Такой подход позволяет анализировать не только «где», но и «когда» происходило движение, что критично для задач пространственной аналитики.