Базовая конфигурация слоёв

Система слоёв в Kepler.gl строится вокруг декларативной конфигурации, где каждый визуальный элемент карты описывается как отдельный слой с набором параметров. Такой подход позволяет управлять визуализацией через состояние приложения (обычно Redux), а не через императивные вызовы API.

Слой в Kepler.gl — это объект, который определяет способ отображения данных: точки, линии, полигоны, тепловые карты и агрегированные представления. Базовая конфигурация слоя включает тип визуализации, источник данных, стилизацию и параметры взаимодействия.

Каждый слой описывается объектом с ключевыми полями:

  • id — уникальный идентификатор слоя
  • type — тип визуализации
  • config — основной блок параметров отображения
  • visualChannels — привязка данных к визуальным переменным
  • dataId — идентификатор набора данных

Пример общей структуры:

const layer = {
  id: 'points-layer',
  type: 'point',
  config: {
    dataId: 'dataset_1',
    label: 'Points Layer',
    color: [255, 0, 0],
    columns: {
      lat: 'latitude',
      lng: 'longitude'
    },
    isVisible: true,
    visConfig: {
      radius: 10,
      opacity: 0.8
    }
  },
  visualChannels: {
    colorField: null,
    sizeField: null
  }
};

Типы слоёв и их базовая конфигурация

Kepler.gl поддерживает несколько основных типов слоёв, каждый из которых имеет специфическую структуру visConfig и набор визуальных каналов.

Точечный слой

Точечный слой используется для отображения дискретных объектов на карте. Это базовый тип, с которого обычно начинается работа.

Ключевые параметры:

  • radius — радиус точки
  • fillColor — цвет заливки
  • strokeColor — цвет обводки
  • opacity — прозрачность
const pointLayer = {
  id: 'point-layer',
  type: 'point',
  config: {
    dataId: 'cities',
    columns: {
      lat: 'lat',
      lng: 'lng'
    },
    visConfig: {
      radius: 6,
      opacity: 0.9,
      outline: true,
      strokeColor: [0, 0, 0]
    }
  }
};

Особенность точечного слоя заключается в том, что он может динамически связывать размер и цвет с полями данных через visualChannels.

Визуальные каналы

visualChannels определяют, какие поля данных управляют визуальными характеристиками слоя.

Основные каналы:

  • colorField — поле, определяющее цвет
  • sizeField — поле, определяющее размер
  • heightField — используется в 3D-слоях
  • strokeColorField — цвет обводки

Пример привязки:

visualChannels: {
  colorField: {
    name: 'population',
    type: 'integer'
  },
  colorScale: 'quantile',
  sizeField: {
    name: 'population',
    type: 'integer'
  },
  sizeScale: 'sqrt'
}

Такая конфигурация позволяет автоматически масштабировать визуализацию в зависимости от распределения данных.

Геометрические слои

Линейные и полигональные слои используются для отображения маршрутов, границ и областей.

Линейный слой

Линейный слой отображает последовательности координат.

const lineLayer = {
  id: 'route-layer',
  type: 'line',
  config: {
    dataId: 'routes',
    columns: {
      lat0: 'start_lat',
      lng0: 'start_lng',
      lat1: 'end_lat',
      lng1: 'end_lng'
    },
    visConfig: {
      opacity: 0.7,
      thickness: 2,
      colorRange: {
        name: 'Global Warming',
        type: 'sequential',
        category: 'Uber',
        colors: ['#5A1846', '#900C3F', '#C70039', '#FF5733', '#FFC300']
      }
    }
  }
};

Линии часто используются для визуализации потоков: транспорт, миграции, сетевые соединения.

Полигональный слой

Полигональный слой используется для областей и административных границ.

const polygonLayer = {
  id: 'polygon-layer',
  type: 'geojson',
  config: {
    dataId: 'regions',
    visConfig: {
      opacity: 0.5,
      strokeColor: [255, 255, 255],
      thickness: 1,
      enable3d: false
    }
  }
};

В случае GeoJSON-слоя данные должны содержать корректную геометрию (Polygon или MultiPolygon).

Heatmap слой

Heatmap используется для визуализации плотности распределения точек.

const heatmapLayer = {
  id: 'heatmap',
  type: 'heatmap',
  config: {
    dataId: 'events',
    visConfig: {
      radius: 20,
      opacity: 0.8,
      intensity: 1,
      threshold: 0.05
    }
  }
};

Heatmap особенно эффективен при работе с большими наборами данных, где точечное отображение перегружает карту.

Hexagon слой

Hexagon слой выполняет пространственную агрегацию данных в шестиугольные ячейки.

const hexLayer = {
  id: 'hex-layer',
  type: 'hexagon',
  config: {
    dataId: 'checkins',
    visConfig: {
      radius: 500,
      coverage: 0.8,
      upperPercentile: 100,
      elevationScale: 50
    }
  }
};

Hexagon позволяет выявлять плотностные кластеры и пространственные закономерности.

Работа с datasetId и связью слоёв с данными

Каждый слой связан с конкретным набором данных через dataId. Это ключевой механизм, позволяющий использовать несколько источников данных в одном приложении.

Пример структуры данных:

const dataset = {
  id: 'cities',
  label: 'Cities Dataset',
  data: [
    { lat: 51.5, lng: -0.1, name: 'London' },
    { lat: 48.8, lng: 2.3, name: 'Paris' }
  ]
};

Связь слоя с данными:

config: {
  dataId: 'cities'
}

Важно, что Kepler.gl не требует предварительной трансформации данных в геометрические структуры — маппинг выполняется через columns.

Настройка колонок (columns mapping)

columns определяет, какие поля данных используются для координат или геометрии.

columns: {
  lat: 'latitude',
  lng: 'longitude'
}

Для линейных слоёв:

columns: {
  lat0: 'start_lat',
  lng0: 'start_lng',
  lat1: 'end_lat',
  lng1: 'end_lng'
}

Для GeoJSON слой не требует явного маппинга координат.

Стилизация через visConfig

visConfig — центральный объект стилизации слоя. Он варьируется в зависимости от типа слоя, но общие параметры включают:

  • opacity — прозрачность
  • color — базовый цвет
  • size — размер элементов
  • thickness — толщина линий
  • enable3d — включение 3D-режима

Пример комплексной стилизации:

visConfig: {
  opacity: 0.6,
  thickness: 3,
  strokeColor: [255, 255, 255],
  colorAggregation: 'average',
  sizeAggregation: 'sum'
}

Динамическое управление слоями через состояние

В React + Redux интеграции Kepler.gl слои являются частью глобального состояния:

const initialState = {
  visState: {
    layers: [pointLayer, lineLayer]
  }
};

Изменение слоя происходит через actions:

import { addLayer, updateLayer } from 'kepler.gl/actions';

dispatch(addLayer({
  layer
}));

Или обновление параметров:

dispatch(updateLayerConfig(layerId, {
  visConfig: {
    opacity: 0.9
  }
}));

Приоритеты и порядок отрисовки

Слои в Kepler.gl рендерятся в порядке массива layers. Последний слой отображается поверх предыдущих.

layers: [backgroundLayer, dataLayer, highlightLayer]

Это критически важно при работе с перекрывающимися геометриями.

Масштабирование и производительность слоёв

При больших объёмах данных ключевыми становятся:

  • агрегационные слои (hexagon, heatmap)
  • отключение лишних визуальных каналов
  • снижение opacity и complexity
  • использование фильтров вместо полного набора данных

Пример фильтрации слоя:

filter: [
  {
    dataId: 'events',
    name: 'timestamp',
    type: 'timeRange',
    value: [1609459200000, 1640995200000]
  }
]

Фильтры применяются на уровне слоя и влияют на вычисление визуализации без изменения исходного датасета.

Связь слоёв с визуальными фильтрами

Фильтры в Kepler.gl тесно связаны с конфигурацией слоёв и могут быть:

  • числовыми диапазонами
  • временными диапазонами
  • категориальными фильтрами

Каждый фильтр привязан к dataId и влияет на все слои, использующие этот набор данных.

Итеративная настройка слоя

Базовая конфигурация слоя обычно развивается итеративно:

  1. Определение type
  2. Привязка dataId
  3. Настройка columns
  4. Определение visConfig
  5. Добавление visualChannels
  6. Оптимизация производительности

Такая последовательность позволяет избежать ошибок отображения и перегрузки визуализации.

Оглавление