Point layer

Роль Point layer в архитектуре визуализации

Point layer в Kepler.gl предназначен для отображения дискретных объектов в виде точек на карте. Каждый элемент слоя соответствует одной географической записи с координатами (longitude, latitude). Этот тип слоя является базовым инструментом для анализа распределённых данных, плотности событий, пользовательской активности, транспортных точек и любых наборов данных, где важна геопривязка отдельных объектов без необходимости их агрегирования в линии или полигоны.

В отличие от кластеризации или heatmap, Point layer сохраняет индивидуальность каждой записи, что позволяет выполнять точечный анализ и визуально выделять аномалии, паттерны и выбросы.

Структура данных для Point layer

Для корректной работы слоя требуется минимальная структура входных данных:

{
  "fields": [
    { "name": "longitude", "type": "real" },
    { "name": "latitude", "type": "real" },
    { "name": "category", "type": "string" }
  ],
  "rows": [
    [37.6156, 55.7522, "event"],
    [30.3141, 59.9386, "event"]
  ]
}

Ключевые требования:

  • координаты должны быть в формате WGS84
  • longitude всегда первым параметром
  • latitude вторым параметром
  • отсутствие NaN и null значений критично для корректного рендеринга

Дополнительные поля используются для стилизации, фильтрации и интерактивности.

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

Point layer задаётся через конфигурацию layers в состоянии Kepler.gl:

const pointLayer = {
  id: "point-layer",
  type: "point",
  config: {
    dataId: "dataset_1",
    label: "Points",
    color: [255, 140, 0],
    columns: {
      lat: "latitude",
      lng: "longitude"
    },
    isVisible: true,
    visConfig: {
      radius: 10,
      fixedRadius: false,
      opacity: 0.8,
      outline: false,
      thickness: 2,
      strokeColor: null,
      colorRange: {
        name: "Global Warming",
        type: "sequential",
        category: "Uber",
        colors: ["#1f9e89", "#55c667", "#5ec962", "#c2df23", "#fde725"]
      }
    }
  }
};

Визуальные параметры Point layer

Радиус точек

Радиус определяет размер каждой точки на карте:

  • фиксированный радиус — одинаковый размер для всех точек
  • динамический радиус — масштабируется относительно зума или значения поля

Пример динамического режима:

visConfig: {
  radius: 5,
  fixedRadius: false,
  radiusRange: [1, 20]
}

Динамический радиус применяется при анализе плотности или весовых характеристик объектов.

Прозрачность и наложение

visConfig: {
  opacity: 0.6
}

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

Обводка (stroke)

Обводка улучшает читаемость точек на насыщенном фоне:

visConfig: {
  outline: true,
  thickness: 1,
  strokeColor: [0, 0, 0]
}

Обводка особенно полезна при визуализации светлых цветов на светлых тайлах карты.

Цветовое кодирование точек

Point layer поддерживает несколько стратегий окрашивания:

1. Фиксированный цвет

color: [0, 128, 255]

Используется при визуализации однородных объектов.

2. Категориальная окраска

Привязка к полю типа string:

colorField: {
  name: "category",
  type: "string"
}

Сопоставление значений:

colorRange: {
  type: "categorical",
  colors: ["#ff6b6b", "#4dabf7", "#51cf66"]
}

3. Числовая шкала

Используется для отображения интенсивности значений:

colorField: {
  name: "value",
  type: "integer"
}
colorRange: {
  type: "sequential",
  colors: ["#f7fbff", "#6baed6", "#08306b"]
}

Интерактивность Point layer

Hover-события

При наведении на точку Kepler.gl формирует объект:

{
  object: {
    position: [lng, lat],
    properties: {
      category: "event",
      value: 42
    }
  }
}

Эти данные используются для отображения tooltip.

Tooltip конфигурация

{
  fieldsToShow: {
    dataset_1: ["category", "value"]
  }
}

Tooltip может быть кастомизирован по набору полей и их порядку отображения.

Фильтрация точек

Point layer поддерживает фильтры по полям данных:

Числовой фильтр

{
  name: "value",
  type: "range",
  value: [10, 100]
}

Категориальный фильтр

{
  name: "category",
  type: "multiSelect",
  value: ["event", "incident"]
}

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

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

Point layer оптимизирован для больших массивов данных, однако производительность зависит от:

  • количества точек
  • сложности стилей (outline, gradient)
  • включённых интерактивных функций

Рекомендации:

  • отключать обводку при >100k точек
  • использовать фиксированный радиус при высокой плотности
  • применять фильтры до передачи данных в слой

Кластеризация как альтернатива Point layer

При увеличении плотности точек используется кластеризация, однако она изменяет семантику данных. Point layer сохраняет исходные записи, что важно для аналитики.

Сравнение:

Подход Сохранение данных Производительность Семантика
Point layer полное средняя точная
Clustering частичное высокая агрегированная

Использование выражений (data-driven styling)

Point layer поддерживает выражения для динамического стиля:

visConfig: {
  colorScale: "quantile",
  colorField: {
    name: "value",
    type: "real"
  }
}

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

Событийная модель слоя

Point layer интегрирован в событийную систему Kepler.gl:

  • onClick — выбор объекта
  • onHover — подсветка
  • onFilterChange — перерасчёт отображения

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

const onLayerCl ick = (info) => {
  if (info && info.object) {
    console.log(info.object.properties);
  }
};

Использование кастомных атрибутов

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

  • вес точки
  • тип события
  • временная метка
  • идентификатор объекта

Пример:

columns: {
  lat: "lat",
  lng: "lng",
  weight: "importance"
}

Типовые сценарии применения

Point layer применяется в задачах:

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

Ограничения модели Point layer

Несмотря на гибкость, слой имеет ограничения:

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

Эти ограничения компенсируются комбинацией с heatmap и grid layer в Kepler.gl.

Оглавление