kepler.gl опирается на концепцию базовой карты как фундамента визуализации пространственных данных. Базовая карта определяет визуальный контекст, на фоне которого строятся слои: точки, линии, полигоны, тепловые карты и агрегированные представления. Выбор стиля базовой карты влияет не только на эстетику, но и на читаемость данных, восприятие плотности объектов и общую когнитивную нагрузку.
Базовая карта выполняет функцию контекстного слоя. Она не является основным источником данных, но задаёт пространственные ориентиры:
В Kepler.gl базовая карта интегрируется через Mapbox GL стиль, что обеспечивает доступ к широкому набору предустановленных тем и возможности кастомизации.
В системе Mapbox, используемой Kepler.gl, стили базовой карты задаются через style URL или JSON-конфигурацию. Наиболее распространённые категории:
Светлая тема используется для аналитических сценариев, где важна читаемость цветных слоёв:
Типичный стиль: mapbox://styles/mapbox/light-v10
Светлая карта хорошо подходит для визуализаций с насыщенной цветовой палитрой слоёв, особенно при работе с категориальными данными.
Тёмная базовая карта снижает визуальный шум и усиливает контраст ярких слоёв:
Типичный стиль: mapbox://styles/mapbox/dark-v10
Тёмная тема используется в аналитике потоков, событий в реальном времени и визуализациях с высокой плотностью точек.
Детализированная карта с акцентом на инфраструктуру:
Типичный стиль: mapbox://styles/mapbox/streets-v11
Используется в логистике, транспортной аналитике, городских данных.
Фотореалистичная подложка:
Типичный стиль: mapbox://styles/mapbox/satellite-v9
Часто комбинируется с полупрозрачными слоями данных для анализа территорий.
В Kepler.gl базовая карта задаётся через конфигурацию состояния
приложения. Основной параметр — mapStyle.
Пример структуры конфигурации:
const config = {
mapStyle: {
styleType: 'dark',
topLayerGroups: {},
visibleLayerGroups: {
label: true,
road: true,
border: true,
building: true,
water: true
},
threeDBuildingColor: [200, 200, 200],
mapStyles: {
dark: {
accessToken: 'MAPBOX_ACCESS_TOKEN',
styleUrl: 'mapbox://styles/mapbox/dark-v10',
label: 'Dark'
},
light: {
accessToken: 'MAPBOX_ACCESS_TOKEN',
styleUrl: 'mapbox://styles/mapbox/light-v10',
label: 'Light'
}
}
}
};Ключевой параметр styleType определяет активный стиль, а
mapStyles содержит доступные варианты.
Базовая карта напрямую влияет на восприятие данных:
При низком контрасте между слоем данных и фоном визуализация теряет выразительность. Например:
Некоторые стили содержат большое количество деталей (дороги, здания), что может конфликтовать с плотными слоями точек. В таких случаях используется упрощённый стиль без второстепенных элементов.
Выбор базовой карты должен учитывать цветовую модель слоёв:
Kepler.gl поддерживает смену базовой карты без перезагрузки состояния
слоёв. Это реализуется через обновление конфигурации
mapStyle.styleType.
dispatch({
type: 'UPDATE_MAP_STYLE',
payload: {
styleType: 'satellite'
}
});При переключении стиля сохраняются:
Изменяется только визуальный контекст карты.
Помимо стандартных тем, используются пользовательские стили Mapbox Studio. Они позволяют:
Пример кастомного стиля:
const customStyle = {
styleUrl: 'mapbox://styles/user/custom-style-id',
accessToken: 'MAPBOX_ACCESS_TOKEN'
};Кастомизация особенно важна в корпоративных аналитических панелях, где визуальный стиль должен соответствовать продуктовой идентичности.
Стиль базовой карты влияет на производительность рендеринга:
При работе с миллионами точек часто используется минималистичная подложка без лишних объектов.
Kepler.gl позволяет регулировать прозрачность базовой карты через настройку слоёв Mapbox. Это особенно важно при:
Прозрачная базовая карта снижает конкуренцию между фоном и данными.
Некоторые стили поддерживают трёхмерные здания и рельеф. В Kepler.gl это контролируется параметром:
threeDBuildingColor: [150, 150, 150]Использование 3D-слоя усиливает пространственное восприятие, но увеличивает нагрузку на рендеринг.
Выбор базовой карты определяется характером данных:
Соотношение между данными и базовой картой определяет итоговую читаемость визуализации.
Kepler.gl предоставляет возможность программного управления стилями через Redux-состояние. Это позволяет:
Пример логики переключения:
const styleType = isNightMode ? 'dark' : 'light';
dispatch({
type: 'UPDATE_MAP_STYLE',
payload: { styleType }
});Такой подход используется в аналитических панелях с адаптивным интерфейсом.
Некоторые ограничения связаны с зависимостью от Mapbox:
Также кастомные стили должны соответствовать спецификации Mapbox Style Specification, иначе могут возникать ошибки рендеринга.
Грамотно выбранный стиль базовой карты снижает когнитивную нагрузку:
На практике минималистичные стили часто оказываются более эффективными, чем визуально насыщенные, особенно при работе с большими объёмами геоданных.