При работе с геопространственными наборами данных редко возникает необходимость отображать всю информацию одновременно. Большие массивы объектов усложняют анализ, перегружают карту и затрудняют поиск закономерностей. Для решения этой задачи в Kepler.gl предусмотрены механизмы фильтрации и трансформации данных, позволяющие отображать только релевантные записи и изменять представление информации без модификации исходного набора данных.
Фильтрация применяется для ограничения отображаемых объектов по определённым критериям:
Трансформация позволяет изменять способ отображения данных:
Фильтры являются частью состояния приложения и хранятся внутри конфигурации карты.
Упрощённая структура фильтра выглядит следующим образом:
{
id: "temperature_filter",
dataId: "weather_data",
name: "temperature",
type: "range",
value: [10, 30]
}Основные параметры:
| Свойство | Назначение |
|---|---|
| id | Уникальный идентификатор фильтра |
| dataId | Набор данных, к которому применяется фильтр |
| name | Имя поля |
| type | Тип фильтра |
| value | Текущее значение фильтра |
При изменении значения фильтра Kepler.gl автоматически пересчитывает видимые объекты на карте.
Используется для числовых значений.
Пример данных:
[
{
city: "Almaty",
population: 2000000
},
{
city: "Karaganda",
population: 500000
}
]Фильтр позволяет отображать только записи, удовлетворяющие диапазону:
population >= 1000000После применения фильтра на карте останется только Алматы.
Подходит для:
Предназначен для работы с датами и временем.
Исходные данные:
[
{
timestamp: "2024-01-01T10:00:00"
},
{
timestamp: "2024-03-01T15:30:00"
}
]Пользователь выбирает временной диапазон через временную шкалу.
Kepler.gl автоматически:
Такой фильтр широко применяется для:
Позволяет выбирать несколько категорий одновременно.
Пример:
[
{
type: "restaurant"
},
{
type: "hotel"
},
{
type: "hospital"
}
]В интерфейсе можно оставить только:
restaurant
hotelОбъекты категории hospital будут скрыты.
Используется для:
Позволяет выбрать одно значение.
Например:
status = "completed"Все остальные записи исключаются из отображения.
Подходит для:
Фильтры могут задаваться программно.
Пример конфигурации:
const config = {
visState: {
filters: [
{
id: "price-filter",
dataId: "housing",
name: "price",
type: "range",
value: [100000, 500000]
}
]
}
};Затем конфигурация загружается в экземпляр карты:
import KeplerGlSchema fr om '@kepler.gl/schemas';
dispatch(
addDataToMap({
datasets: {
info: {
id: 'housing',
label: 'Housing'
},
data
},
config
})
);После загрузки фильтр становится активным автоматически.
Kepler.gl поддерживает одновременное использование нескольких фильтров.
Предположим, имеется набор данных:
[
{
city: "Almaty",
population: 2000000,
year: 2024
}
]Добавлены фильтры:
population > 1000000и
year = 2024Отображаться будут только записи, удовлетворяющие обоим условиям одновременно.
Логика работы соответствует оператору:
ANDЭто позволяет строить сложные аналитические выборки.
Один фильтр может воздействовать сразу на несколько визуальных слоёв.
Например:
Все они используют один источник данных.
При изменении фильтра все слои синхронно обновляются.
Преимущества подхода:
Одной из наиболее мощных возможностей является анимация временных фильтров.
При наличии поля времени:
timestampKepler.gl может автоматически воспроизводить изменения данных во времени.
Настраиваются:
Типичный сценарий:
Kepler.gl поддерживает множество форматов времени.
Примеры:
2024-01-012024-01-01T12:30:00170411040000001/01/2024Однако наиболее надёжным вариантом считается формат ISO 8601:
2024-01-01T12:30:00ZОн корректно обрабатывается большинством библиотек JavaScript.
При работе с большими объёмами данных производительность становится критически важной.
Основные факторы:
Например:
1000 записейи
10 000 000 записейбудут обрабатываться совершенно по-разному.
Каждый новый фильтр требует дополнительной проверки записей.
Например:
filter1 &&
filter2 &&
filter3 &&
filter4увеличивают объём вычислений.
Наиболее ресурсоёмкими являются:
Фильтрация таких слоёв требует дополнительного пересчёта агрегаций.
Одним из преимуществ Kepler.gl является использование возможностей WebGL.
Часть операций может выполняться непосредственно на графическом процессоре.
Преимущества:
Особенно заметен эффект при:
Трансформация позволяет получать новую информацию на основе исходных данных.
Предположим, имеется набор точек:
[
{lat: 43.2, lng: 76.9, value: 10},
{lat: 43.2, lng: 76.9, value: 20},
{lat: 43.2, lng: 76.9, value: 30}
]Вместо отображения каждой точки отдельно можно агрегировать значения:
10 + 20 + 30 = 60Получается один визуальный объект с суммарным показателем.
Hexagon Layer выполняет пространственную агрегацию данных.
Процесс включает:
Поддерживаются функции:
countsummeanmedianmaxminВ результате отдельные записи преобразуются в статистическую поверхность.
Grid Layer работает аналогично Hexagon Layer, но использует прямоугольную сетку.
Преимущества:
Используется для:
Кластеризация представляет собой трансформацию множества точек в группы.
Исходные данные:
10000 точекПосле кластеризации:
50 кластеровКаждый кластер содержит информацию о количестве объектов внутри.
Преимущества:
Фильтры применяются до выполнения агрегации.
Последовательность выглядит следующим образом:
Исходные данные
↓
Фильтрация
↓
Агрегация
↓
ВизуализацияЭто означает, что при изменении фильтра автоматически пересчитываются:
Благодаря этому аналитические результаты всегда соответствуют текущей выборке данных.
Фильтрация особенно полезна в режиме сравнения карт.
В Split Maps можно отображать разные состояния данных.
Например:
Левая карта:
year = 2023Правая карта:
year = 2024Такой подход позволяет визуально анализировать изменения между периодами.
В приложениях на React фильтры часто изменяются динамически.
Пример изменения диапазона:
dispatch({
type: 'SET_FILTER',
payload: {
filterId: 'population-filter',
value: [500000, 3000000]
}
});После отправки действия карта немедленно обновится.
Подобный механизм используется при интеграции:
Текущее состояние фильтров входит в экспортируемую конфигурацию карты.
При сохранении проекта:
const savedConfig = KeplerGlSchema.save(state.keplerGl.map);В конфигурацию попадают:
После повторной загрузки проекта карта восстанавливается в идентичном состоянии.
Фильтрация:
vehicle_type = "truck"и
date = todayПозволяет анализировать только грузовой транспорт за выбранный день.
Фильтрация населения:
population > 100000После чего строятся агрегированные тепловые карты плотности клиентов.
Фильтр:
temperature > 40Показывает только критические показания оборудования.
Временной диапазон:
08:00 - 10:00Позволяет исследовать утренний транспортный поток.
Использовать минимально необходимое количество фильтров.
Избыточное число условий усложняет анализ и снижает производительность.
Применять временные фильтры для потоковых данных.
Они обеспечивают наиболее наглядное исследование изменений во времени.
Предпочитать категориальные фильтры текстовому поиску.
Категории обрабатываются быстрее и проще воспринимаются визуально.
Использовать агрегацию после фильтрации.
Такой подход обеспечивает корректные статистические результаты.
Хранить фильтры внутри конфигурации карты.
Это позволяет воспроизводить аналитические сценарии и обмениваться ими между пользователями без потери настроек.