Временные шкалы в Kepler.gl строятся вокруг концепции временного измерения как первого класса данных. Любой слой может содержать поля, интерпретируемые как временные метки, на основе которых формируются фильтры, анимации и агрегированные представления.
Внутри движка данные рассматриваются как набор объектов, где временные значения преобразуются в числовое представление (timestamp). Это обеспечивает унифицированную работу с различными источниками: CSV, GeoJSON, JSON, API-выгрузками.
Ключевой принцип обработки времени:
Kepler.gl поддерживает несколько типов временных входных данных, однако все они в итоге приводятся к числовому виду.
Основные форматы:
2024-01-01T12:30:00Z2024-01-01 12:30:0017041122001704112200000Процесс нормализации включает:
Date.parse или специализированные
парсерыПример подготовки данных:
const data = [
{ lat: 50.45, lng: 30.52, time: '2024-01-01T10:00:00Z' },
{ lat: 50.46, lng: 30.53, time: '2024-01-01T11:00:00Z' }
];После обработки:
time -> 1704103200000Временной фильтр является центральным механизмом управления отображением данных по времени.
Он задаётся через состояние слоя или глобальный фильтр:
const config = {
filters: [
{
dataId: 'dataset',
name: 'time',
type: 'timeRange',
value: [1704100000000, 1704200000000],
animationWindow: 'free'
}
]
};Основные параметры:
value — диапазон времениanimationWindow — режим смещения окнаspeed — скорость воспроизведенияstep — дискретность шагаТипы окон анимации:
free — свободное движение окнаpoint — фиксированная точка времениinterval — фиксированный интервалМеханизм фильтрации работает на уровне GPU-готовых данных, что позволяет обрабатывать большие наборы без полной перерисовки сцены.
Временная анимация реализует модель последовательного изменения глобального временного состояния.
Базовая логика:
Псевдологика цикла:
function tick(state) {
const nextTime = state.time + state.step;
return {
...state,
time: nextTime
};
}Анимация может быть:
Визуально объекты могут:
Каждый слой может использовать временное поле независимо, но чаще применяется общий временной фильтр.
Типы временных слоёв:
Для траекторий используется интерполяция между точками:
A(t) = A0 + (A1 - A0) * αгде α зависит от текущего времени относительно сегмента.
При работе с большими массивами данных применяется агрегация по временным бинам.
Основные методы:
Пример разбиения:
function bucket(time, interval) {
return Math.floor(time / interval) * interval;
}Это позволяет:
Один датасет может содержать несколько временных измерений:
Kepler.gl позволяет назначать разные фильтры на разные поля, но глобальная анимация обычно привязывается к одному активному таймлайну.
Конфликты разрешаются через приоритет:
Все временные слои синхронизируются через единое состояние приложения. Изменение времени в одном компоненте приводит к обновлению всех зависимых слоёв.
Модель состояния:
state = {
animationConfig: {
currentTime: 1704100000000,
speed: 1,
isAnimating: true
}
};Изменение currentTime триггерит перерасчёт фильтров и
обновление GPU-буферов.
Работа с временными данными требует оптимизации на нескольких уровнях:
1. Предобработка
2. Фильтрация
3. Рендеринг
4. Анимация
Для повышения визуальной плавности используется интерполяция между состояниями.
Линейная интерполяция:
function lerp(a, b, t) {
return a + (b - a) * t;
}Применение:
Скользящее окно позволяет анализировать динамику данных в фиксированном диапазоне времени.
Модель:
window = [t - Δ, t]Где:
t — текущее времяΔ — ширина окнаИспользуется для:
Временная шкала тесно интегрирована с геометрией:
Модель связывания:
(time, lat, lng) -> visual stateЭто создаёт трёхмерное пространство анализа: широта, долгота, время.