В Kepler.gl стилизация геометрии слоёв строится вокруг двух базовых визуальных свойств: fill (заливка) и stroke (обводка). Эти параметры определяют внешний вид полигонов, линий и точек, формируя читаемость карты, её визуальную иерархию и способность передавать плотность данных.
Параметр fill отвечает за внутреннюю часть геометрического объекта. В контексте Kepler.gl он чаще всего применяется к полигонам (Polygon Layer) и hexagon/grid слоям.
В Kepler.gl заливка может задаваться несколькими способами:
Пример конфигурации слоя:
const polygonLayer = {
id: 'polygon-layer',
type: 'polygon',
data,
getPolygon: d => d.geometry,
getFillColor: d => [255, 100, 100, 180]
};Здесь массив [R, G, B, A] определяет:
Альфа-канал играет ключевую роль при наложении слоёв. При значениях ниже 255 достигается эффект:
Особенно важно при работе с hexagon слоями, где плотность данных может перекрывать соседние области.
Параметр stroke управляет линиями контура геометрии. Он применяется к:
Stroke отвечает за:
const polygonLayer = {
id: 'polygon-layer',
type: 'polygon',
data,
getPolygon: d => d.geometry,
getLineColor: d => [0, 0, 0, 255],
getLineWidth: d => 1
};Параметр getLineWidth управляет толщиной обводки.
Особенности поведения:
В WebGL-рендеринге Kepler.gl толщина линии масштабируется в зависимости от зума, если включены соответствующие настройки слоя.
Совместное использование заливки и обводки формирует визуальный баланс слоя.
getFillColor: d => [80, 140, 200, 160],
getLineColor: d => [20, 20, 20, 255],
getLineWidth: 1Используется для административных границ и территориальных данных.
getFillColor: d => [255, 120, 0, 100],
getLineColor: d => [0, 0, 0, 0]Подходит для heatmap-подобных визуализаций, где важна плотность, а не форма.
getFillColor: d => [0, 0, 0, 30],
getLineColor: d => [255, 0, 0, 255],
getLineWidth: 2Применяется для выделения границ поверх слабой заливки.
Kepler.gl позволяет привязывать визуальные параметры к данным через функции доступа.
getFillColor: d => {
if (d.value > 100) return [255, 0, 0, 200];
if (d.value > 50) return [255, 165, 0, 180];
return [0, 200, 100, 150];
}getLineWidth: d => Math.log(d.population) * 0.5Такой подход позволяет:
Взаимодействие fill и stroke особенно сильно зависит от прозрачности:
Типичные диапазоны:
В LineLayer stroke фактически становится основным визуальным параметром.
const lineLayer = {
id: 'line-layer',
type: 'line',
data,
getSourcePosition: d => d.from,
getTargetPosition: d => d.to,
getColor: d => [0, 120, 255],
getWidth: d => 2
};Особенности:
В PointLayer stroke используется для обводки кругов:
const pointLayer = {
id: 'point-layer',
type: 'point',
data,
getPosition: d => d.coordinates,
getFillColor: d => [0, 200, 255, 180],
getLineColor: d => [0, 0, 0],
getLineWidth: 1
};Функция обводки здесь:
При работе с большим количеством данных параметры stroke и fill влияют на производительность WebGL-рендера.
Ключевые факторы:
Рекомендуемые практики:
Комбинация параметров формирует визуальную иерархию:
Сильный stroke при слабом fill переводит объект в категорию «контурных ориентиров», тогда как сильный fill и слабый stroke создают эффект «пятен плотности».
Kepler.gl позволяет адаптировать визуализацию под уровень масштабирования:
Пример:
getLineWidth: d => (zoom > 10 ? 2 : 0.5)Такой подход обеспечивает:
Использование stroke и fill в связке позволяет реализовать:
Каждый параметр становится частью общей системы визуального кодирования, где цвет, прозрачность и толщина формируют многомерное представление данных без изменения их геометрии.