Icon layer

Icon layer в Kepler.gl построен на основе слоя IconLayer из deck.gl и предназначен для отображения точечных объектов с использованием пользовательских изображений-иконок вместо стандартных геометрических маркеров. Этот слой особенно полезен в задачах визуализации, где требуется семантическое различие объектов через пиктограммы: транспорт, точки интереса, события, категории объектов, статусы.

В отличие от классических scatter-слоёв, работающих с примитивами (круги, квадраты), Icon layer оперирует спрайтами, загружаемыми из атласа изображений. Это позволяет значительно повысить выразительность карты при сохранении производительности за счёт батчинга текстур.

Слой строится вокруг трёх ключевых компонентов:

  • набор данных (data)
  • функция позиционирования (getPosition)
  • система сопоставления иконок (iconAtlas + iconMapping)

Каждая запись данных сопоставляется с конкретной иконкой из атласа, которая затем рендерится в заданной географической точке.

Типичная структура данных:

const data = [
  {
    coordinates: [71.4304, 51.1284],
    type: "hospital"
  },
  {
    coordinates: [71.4450, 51.1500],
    type: "school"
  }
];

Инициализация слоя

В Kepler.gl слой Icon layer обычно конфигурируется через описание слоя в состоянии приложения или через API deck.gl при кастомной интеграции.

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

import { IconLayer } from '@deck.gl/layers';

const iconLayer = new IconLayer({
  id: 'icon-layer',
  data,
  pickable: true,

  getPosition: d => d.coordinates,

  getIcon: d => ({
    url: 'icons-atlas.png',
    width: 128,
    height: 128,
    mask: true
  }),

  getSize: 32,
  sizeScale: 1,
  billboard: true
});

Атлас и маппинг иконок

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

Дополнительно используется mapping-объект:

const iconMapping = {
  hospital: { x: 0, y: 0, width: 32, height: 32, mask: true },
  school: { x: 32, y: 0, width: 32, height: 32, mask: true },
  airport: { x: 64, y: 0, width: 32, height: 32, mask: true }
};

И конфигурация слоя:

const layer = new IconLayer({
  id: 'icon-layer',
  data,
  iconAtlas: '/atlas.png',
  iconMapping,

  getIcon: d => d.type,
  getPosition: d => d.coordinates,
  sizeScale: 2,
  pickable: true
});

В Kepler.gl этот механизм скрыт за UI, где пользователь загружает иконки или выбирает предустановленные наборы.

Геометрия и позиционирование

Функция getPosition является обязательной и возвращает координаты в формате [longitude, latitude]. Kepler.gl строго придерживается WGS84.

Особенность Icon layer заключается в том, что иконка по умолчанию рендерится как billboard — всегда повёрнута к камере. Это задаётся параметром:

  • billboard: true

При отключении billboard иконки начинают вести себя как элементы в 3D-пространстве, что используется реже и требует аккуратной настройки масштаба.

Масштабирование и размер

Размер иконок управляется несколькими параметрами:

  • getSize — функция или число базового размера
  • sizeScale — глобальный множитель
  • sizeUnits — единицы измерения (meters, pixels)

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

getSize: d => d.importance * 10,
sizeScale: 1

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

Цвет и маскирование

Icon layer поддерживает цветовое тонирование через параметр getColor. Однако важно учитывать, что цвет применяется корректно только при включённом mask: true в iconMapping.

getColor: d => [255, 0, 0]

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

Взаимодействие и picking

Параметр pickable: true включает поддержку интерактивности. При наведении или клике слой возвращает объект данных, связанный с иконкой.

Обработчики событий:

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

onHover: info => {
  console.log(info.coordinate);
}

Kepler.gl использует этот механизм для отображения всплывающих подсказок (tooltips) и выделения объектов.

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

Icon layer оптимизирован под работу с большими наборами точек благодаря GPU-рендерингу. Однако существуют ограничения:

  1. Размер атласа влияет на время загрузки
  2. Слишком большое количество уникальных иконок снижает эффективность batching
  3. Масштабирование с динамическими getIcon может увеличивать нагрузку

Рекомендуемые подходы:

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

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

В Kepler.gl слои описываются декларативно через конфигурацию visState. Icon layer представлен объектом слоя:

{
  id: 'icon-layer',
  type: 'icon',
  config: {
    dataId: 'dataset_1',
    columns: {
      lat: 'latitude',
      lng: 'longitude'
    },
    visConfig: {
      size: 30,
      color: [0, 128, 255],
      radius: 10
    }
  }
}

Kepler.gl автоматически трансформирует этот объект в соответствующий deck.gl IconLayer.

Сопоставление данных и визуальных атрибутов

Одной из ключевых задач является маппинг полей данных на визуальные свойства. В Icon layer это включает:

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

Пример комбинированной логики:

getIcon: d => d.category,
getSize: d => d.value > 100 ? 40 : 20,
getColor: d => d.status === 'active'
  ? [0, 200, 0]
  : [200, 0, 0]

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

Icon layer имеет ряд архитектурных ограничений:

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

Эти ограничения компенсируются высокой скоростью отрисовки и простотой интеграции.

Использование в аналитических сценариях

Icon layer часто применяется для:

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

При этом слой часто комбинируется с:

  • Scatterplot layer для количественного анализа
  • Heatmap layer для плотности
  • Grid layer для агрегации

Такая композиция позволяет строить многослойные аналитические карты, где Icon layer отвечает за семантическую интерпретацию точек, а остальные слои — за статистическое представление данных.

Оглавление