GeoJSON layer

GeoJSON слой в Kepler.gl представляет собой визуальный компонент, предназначенный для отображения геопространственных данных в формате GeoJSON через стек deck.gl. Он используется для рендеринга точек, линий и полигонов в единой структуре данных, обеспечивая гибкую стилизацию, интерактивность и высокую производительность при работе с большими наборами геоданных.

В основе реализации лежит слой GeoJsonLayer из библиотеки @deck.gl/layers, интегрированный в архитектуру Kepler.gl как универсальный механизм отображения геометрий разного типа без необходимости разделения данных на несколько слоёв.

Структура данных GeoJSON

GeoJSON слой принимает данные, соответствующие спецификации GeoJSON. Поддерживаются следующие типы геометрий:

  • Point
  • MultiPoint
  • LineString
  • MultiLineString
  • Polygon
  • MultiPolygon
  • GeometryCollection

Каждый объект содержит:

  • type — тип объекта Feature
  • geometry — геометрия
  • properties — пользовательские атрибуты

Пример базового объекта:

{
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [30.1, 59.9],
        [30.3, 59.9],
        [30.3, 60.0],
        [30.1, 60.0],
        [30.1, 59.9]
      ]
    ]
  },
  "properties": {
    "name": "area-1",
    "value": 42
  }
}

Kepler.gl использует этот формат напрямую либо через преобразование CSV/табличных данных в GeoJSON внутри конфигурации слоя.

Создание GeoJSON слоя в Kepler.gl

GeoJSON слой определяется в конфигурации визуализации через объект слоя. Основная структура включает тип слоя, источник данных и параметры визуализации.

const geoJsonLayer = {
  id: 'geojson-layer',
  type: 'geojson',
  config: {
    dataId: 'geojson_dataset',
    label: 'GeoJSON Layer',
    color: [255, 140, 0],
    columns: {
      geojson: '_geojson'
    },
    isVisible: true,
    visConfig: {
      opacity: 0.8,
      strokeColor: [0, 0, 0],
      strokeColorRange: {
        name: 'Global Warming',
        type: 'sequential',
        category: 'Uber',
        colors: ['#5A1846', '#900C3F', '#C70039', '#FF5733', '#FFC300']
      },
      thickness: 2,
      filled: true,
      stroked: true,
      enable3d: false
    }
  }
};

Поддерживаемые геометрии и особенности рендеринга

GeoJSON слой обрабатывает геометрию в зависимости от её типа, применяя разные стратегии визуализации.

Точки (Point / MultiPoint)

Точки отображаются как пиксельные или векторные маркеры. Основные параметры:

  • радиус
  • цвет заливки
  • цвет обводки
  • масштабирование по зуму

Функция вычисления радиуса:

getRadius: d => d.properties.size || 10

Линии (LineString / MultiLineString)

Линии отображаются как геодезические или экранные сегменты. Поддерживаются:

  • переменная толщина
  • цвет по атрибуту
  • градиент вдоль линии (при кастомной реализации)
getLineColor: d => {
  const speed = d.properties.speed;
  return speed > 50 ? [255, 0, 0] : [0, 128, 255];
}

Полигоны (Polygon / MultiPolygon)

Полигоны являются ключевым типом для аналитической визуализации.

Поддерживаемые параметры:

  • заливка
  • обводка
  • экструзия в 3D
  • цветовая шкала по атрибутам
getFillColor: d => {
  const value = d.properties.value;
  return value > 100 ? [200, 0, 0] : [0, 200, 100];
}

Конфигурация визуальных параметров

GeoJSON слой предоставляет расширенную систему стилизации через visConfig.

Основные параметры:

  • opacity — общая прозрачность слоя
  • strokeColor — цвет обводки
  • thickness — толщина линий
  • filled — включение заливки полигонов
  • stroked — включение обводки
  • enable3d — активация экструзии

Экструзия полигонов (3D режим)

GeoJSON слой поддерживает преобразование полигонов в 3D-объекты. Высота может вычисляться динамически на основе атрибутов данных.

getElevation: d => d.properties.height || 100

При включении режима:

enable3d: true

геометрия полигонов преобразуется в объемные формы, где каждая грань рассчитывается через WebGL шейдеры deck.gl.

Работа с атрибутами данных

GeoJSON слой тесно связан с системой полей Kepler.gl. Атрибуты используются для:

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

Пример фильтрации по значению:

filter: [
  {
    id: 'value_filter',
    dataId: 'geojson_dataset',
    name: 'value',
    type: 'range',
    value: [10, 200]
  }
]

Динамическое окрашивание

Цветовые функции позволяют связывать визуализацию с данными:

getColor: d => {
  const category = d.properties.category;
  switch (category) {
    case 'A':
      return [255, 0, 0];
    case 'B':
      return [0, 255, 0];
    default:
      return [0, 0, 255];
  }
}

Дополнительно может применяться нормализация значений:

const normalize = (v, min, max) =>
  (v - min) / (max - min);

Производительность и оптимизация

GeoJSON слой при работе с большими объёмами данных требует оптимизации на уровне:

  • геометрического упрощения (simplification)
  • кэширования вычисляемых атрибутов
  • использования индексированных структур данных
  • минимизации перерендеринга через мемоизацию функций доступа

Особое значение имеет снижение количества вершин в полигонах:

turf.simplify(geojson, {
  tolerance: 0.01,
  highQuality: false
});

Взаимодействие с пользователем

GeoJSON слой поддерживает интерактивность:

  • hover-события
  • click-события
  • выделение объектов
  • всплывающие подсказки

Пример обработчика:

onClick: (info, event) => {
  if (info.object) {
    console.log(info.object.properties);
  }
}

Hover позволяет изменять визуальные параметры динамически:

getLineWidth: d => (d === hoveredObject ? 4 : 1)

Интеграция с deck.gl слоями

Kepler.gl GeoJSON слой является абстракцией над GeoJsonLayer из deck.gl. Это означает, что многие параметры передаются напрямую в низкоуровневый слой.

Связь выглядит следующим образом:

  • Kepler.gl слой → конфигурация визуализации
  • deck.gl GeoJsonLayer → рендеринг WebGL
  • WebGL контекст → отрисовка геометрии

Это позволяет использовать единый pipeline рендеринга для всех геоданных.

Использование кастомных функций доступа (accessors)

Accessors являются ключевым механизмом управления визуализацией:

  • getFillColor
  • getLineColor
  • getRadius
  • getElevation

Пример комплексной конфигурации:

const accessors = {
  getFillColor: f => [
    f.properties.r * 255,
    f.properties.g * 255,
    f.properties.b * 255
  ],
  getLineWidth: f => Math.log(f.properties.weight + 1),
  getElevation: f => f.properties.population / 1000
};

Стилизация через цветовые диапазоны

Kepler.gl поддерживает встроенные цветовые шкалы:

  • sequential
  • diverging
  • categorical

Пример конфигурации:

strokeColorRange: {
  type: 'sequential',
  colors: ['#0d0887', '#6a00a8', '#b12a90', '#e16462', '#fca636']
}

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

Обработка сложных GeoJSON структур

GeometryCollection и вложенные структуры требуют рекурсивной обработки. Kepler.gl автоматически разворачивает такие структуры в плоский набор геометрий перед передачей в слой.

При этом сохраняется связь с исходными properties, что позволяет агрегировать данные на уровне объекта.

Ограничения слоя

GeoJSON слой имеет ряд технических ограничений:

  • высокая сложность полигонов снижает производительность
  • отсутствие нативной поддержки топологических операций
  • зависимость от качества исходного GeoJSON
  • ограниченная поддержка очень больших FeatureCollection без предобработки

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

Архитектурная роль в Kepler.gl

GeoJSON слой выступает универсальным контейнером для любых пространственных данных, когда невозможно или нецелесообразно использовать специализированные слои (heatmap, arc, grid, hexagon).

Он часто используется как:

  • базовый слой для кастомных визуализаций
  • слой для импортированных внешних GeoJSON файлов
  • инструмент отладки геометрии
  • промежуточный формат при трансформации данных
Оглавление