PolygonLayer

PolygonLayer — один из ключевых слоёв для работы с полигональной геометрией в экосистеме deck.gl, предназначенный для визуализации областей на карте и в произвольных координатных пространствах. Он используется для отображения границ регионов, геозон, административных делений, пользовательских областей, а также для построения трёхмерных экструдированных объектов на основе полигонов.

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

Структура данных и формат входа

PolygonLayer принимает данные в различных форматах, но ключевым является GeoJSON-подобная структура или массив координат.

Типичная форма входных данных:

const data = [
  {
    polygon: [
      [37.78, -122.4],
      [37.79, -122.41],
      [37.77, -122.42]
    ],
    population: 1200
  }
];

Поддерживаются также:

  • GeoJSON FeatureCollection
  • массив координатных массивов
  • кастомные структуры через accessors

Ключевая особенность слоя — полная гибкость извлечения геометрии через функции getPolygon.

Базовая инициализация слоя

PolygonLayer создаётся как экземпляр слоя deck.gl и включается в массив layers.

import {Deck} from '@deck.gl/core';
import {PolygonLayer} from '@deck.gl/layers';

const layer = new PolygonLayer({
  id: 'polygon-layer',
  data,
  getPolygon: d => d.polygon,
  getFillColor: [255, 140, 0, 180],
  getLineColor: [0, 0, 0],
  lineWidthMinPixels: 1
});

const deck = new Deck({
  initialViewState: {
    longitude: -122.4,
    latitude: 37.78,
    zoom: 12
  },
  controller: true,
  layers: [layer]
});

Геометрическая модель полигона

PolygonLayer работает с триангулированными представлениями полигонов. На входе принимаются:

  • простые полигоны
  • полигоны с отверстиями (holes)
  • мультиполигоны

Внутренне геометрия преобразуется в набор треугольников для рендеринга в WebGL. Это позволяет эффективно отображать сложные формы без потери производительности.

Формат полигона с отверстиями:

const polygon = [
  // внешний контур
  [
    [0, 0],
    [10, 0],
    [10, 10],
    [0, 10]
  ],
  // отверстие
  [
    [3, 3],
    [7, 3],
    [7, 7],
    [3, 7]
  ]
];

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

PolygonLayer обладает большим набором параметров, влияющих на визуализацию и поведение.

getPolygon

Функция извлечения геометрии из объекта данных.

getPolygon: d => d.geometry.coordinates

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

getFillColor

Определяет цвет заливки полигона.

getFillColor: d => [200, 0, 80, 180]

Поддерживается:

  • статический массив RGBA
  • динамическая функция от объекта данных

getLineColor

Определяет цвет границ полигона.

getLineColor: [0, 0, 0, 255]

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

getLineWidth

Задаёт толщину линии границы.

getLineWidth: 2

Также поддерживает функции-аксессоры.

Экструзия и 3D-визуализация

Одной из ключевых возможностей PolygonLayer является поддержка трёхмерной экструзии.

extruded

Включает режим подъёма полигонов в 3D.

extruded: true

getElevation

Определяет высоту экструдированного полигона.

getElevation: d => d.value

Часто используется для построения:

  • тепловых карт в 3D
  • карт плотности населения
  • географических статистик

material

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

material: {
  ambient: 0.35,
  diffuse: 0.6,
  shininess: 32
}

Поддержка освещения делает возможной реалистичную визуализацию зданий и территорий.

Работа с GeoJSON

PolygonLayer нативно поддерживает GeoJSON FeatureCollection.

const geojson = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [-122.4, 37.78],
            [-122.41, 37.79],
            [-122.42, 37.77],
            [-122.4, 37.78]
          ]
        ]
      },
      properties: {
        name: 'zone-a',
        height: 100
      }
    }
  ]
};

Использование:

new PolygonLayer({
  data: geojson,
  getPolygon: f => f.geometry.coordinates,
  getElevation: f => f.properties.height
});

Обработка мультиполигонов

PolygonLayer поддерживает MultiPolygon структуры, что важно для стран, регионов и сложных территорий.

const multiPolygon = [
  [
    [[0, 0], [10, 0], [10, 10], [0, 0]]
  ],
  [
    [[20, 20], [30, 20], [30, 30], [20, 20]]
  ]
];

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

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

PolygonLayer поддерживает механизм picking — определение объекта под курсором.

pickable

pickable: true

onHover

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

onClick

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

Информация info содержит:

  • x, y — координаты курсора
  • object — объект данных
  • coordinate — географические координаты

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

PolygonLayer оптимизирован для работы с большими наборами данных благодаря:

  • WebGL-триангуляции
  • батчингу атрибутов
  • инстансингу геометрии
  • кешированию вычислений

Ключевые практики оптимизации:

  • минимизация вызовов accessor-функций
  • предвычисление цветов и высот
  • использование числовых массивов вместо объектов
  • отключение line rendering при ненадобности

Работа с масштабированием и координатами

PolygonLayer поддерживает различные системы координат через coordinateSystem.

coordinateSystem: COORDINATE_SYSTEM.LNGLAT

Также возможны:

  • локальные координаты
  • cartesian системы
  • проектированные пространства

Это делает слой универсальным не только для карт, но и для абстрактной 2D/3D визуализации.

Динамические данные и обновления

PolygonLayer эффективно обрабатывает обновления данных через diffing props.

Пример обновления:

layer.setProps({
  data: newData,
  getFillColor: d => d.color
});

Изменяются только затронутые атрибуты, без полной перерасчётной геометрии.

Комбинирование с другими слоями

PolygonLayer часто используется совместно с:

  • ScatterplotLayer для точек
  • LineLayer для маршрутов
  • ArcLayer для связей
  • TextLayer для подписей

Пример композиции:

layers: [
  new PolygonLayer({...}),
  new ScatterplotLayer({...}),
  new TextLayer({...})
]

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

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

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

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

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

Управление стилем через функции доступа

Гибкость PolygonLayer заключается в использовании accessor-функций:

getFillColor: d => {
  if (d.value > 1000) return [255, 0, 0, 200];
  return [0, 255, 0, 200];
}

Аналогично можно управлять:

  • прозрачностью
  • высотой
  • шириной границ
  • цветом в зависимости от категории

Особенности рендеринга

PolygonLayer использует WebGL pipeline:

  1. Тесселяция полигонов
  2. Генерация вершин
  3. Применение атрибутов
  4. Рендеринг треугольников
  5. Отрисовка контуров (если включено)

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

Ограничения и поведение сложных геометрий

При работе с очень сложными полигонами:

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

Рекомендуется:

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