PathLayer

Назначение слоя

PathLayer в Deck.gl предназначен для визуализации линейных геометрий, представленных в виде последовательностей координат. Слой используется для отрисовки маршрутов, траекторий движения, сетей дорог, логистических линий, временных треков и любых полилиний, требующих масштабируемой и производительной отрисовки в WebGL.

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

Модель данных

PathLayer оперирует набором объектов, каждый из которых содержит путь как массив координат:

const data = [
  {
    path: [
      [37.78, -122.41],
      [37.79, -122.42],
      [37.80, -122.43]
    ],
    color: [255, 0, 0],
    width: 4
  }
];

Альтернативный формат предполагает вычисление пути через accessor:

new PathLayer({
  id: 'path-layer',
  data,
  getPath: d => d.path,
  getColor: d => d.color,
  getWidth: d => d.width
});

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

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

data

Источник данных. Может быть массивом объектов или результатом трансформации внешних API.

getPath

Функция доступа к координатам пути.

getPath: d => d.coordinates

Каждый путь представляет собой массив точек [lng, lat] или [lng, lat, z].

getColor

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

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

Поддерживается RGBA-формат, где альфа-канал влияет на прозрачность.

getWidth

Устанавливает ширину линии. Значение интерпретируется в зависимости от widthUnits.

getWidth: d => d.thickness

widthUnits

Определяет систему измерения ширины:

  • pixels — фиксированная ширина в пикселях
  • meters — географическая ширина в метрах
  • common — абстрактная единица, масштабируемая сценой

Использование meters критично для картографических приложений, где требуется сохранение реального масштаба при зуме.

widthMinPixels и widthMaxPixels

Ограничивают визуальную толщину линии при масштабировании.

widthMinPixels: 1,
widthMaxPixels: 10

Эти параметры предотвращают исчезновение линий при отдалении камеры и чрезмерное утолщение при приближении.

rounded и jointRounded

Управляют стилем соединений сегментов:

  • rounded: сглаживание всей линии
  • jointRounded: скругление только в узлах

Использование скруглений увеличивает визуальную гладкость, но может снижать производительность при большом количестве сегментов.

capRounded

Определяет форму окончания линии:

  • true — округлые окончания
  • false — прямые срезы

miterLimit

Контролирует поведение острых углов при соединении сегментов. Используется при неокруглённых соединениях, предотвращая артефакты на резких поворотах.

Геометрия и представление в WebGL

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

Основная задача GPU-части — вычислить нормали к сегментам и построить геометрию с учётом:

  • направления сегмента
  • ширины линии
  • стиля соединения
  • перспективного искажения камеры

Пример базового использования

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

const layer = new PathLayer({
  id: 'route-path',
  data: [
    {
      path: [
        [37.7749, -122.4194],
        [37.7849, -122.4094],
        [37.7949, -122.3994]
      ],
      color: [255, 0, 0],
      width: 5
    }
  ],
  getPath: d => d.path,
  getColor: d => d.color,
  getWidth: d => d.width,
  widthUnits: 'pixels',
  rounded: true
});

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

Работа с географическими координатами

PathLayer предполагает использование координат в формате [longitude, latitude]. При добавлении третьей компоненты [lng, lat, elevation] слой способен учитывать высоту, что позволяет строить трёхмерные траектории.

При работе в meters важно учитывать проекцию карты и возможные искажения на высоких широтах.

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

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

Использование бинарного формата

Deck.gl поддерживает бинарные атрибуты, что снижает накладные расходы на сериализацию:

  • меньше объектов JavaScript
  • меньше обращений к accessor-функциям
  • более эффективная загрузка в буферы WebGL

Упрощение геометрии

Сложные линии с высокой плотностью точек могут быть упрощены до рендеринга:

  • алгоритм Дугласа-Пекера
  • адаптивное прореживание по экранному пиксельному расстоянию

Стабилизация ширины

Использование widthMinPixels и widthMaxPixels предотвращает избыточное перерасходование GPU при экстремальных зумах, снижая необходимость перерасчёта геометрии.

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

PathLayer поддерживает события взаимодействия через picking API Deck.gl.

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

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

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

Layer обновляется при изменении props. При потоковых данных важно минимизировать полную пересборку:

  • обновление только изменённых путей
  • использование immutable data structures
  • memoization accessor-функций

Расширенные сценарии

Отображение маршрутов транспорта

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

  • автобусных линий
  • авиационных траекторий
  • морских маршрутов

С разными стилями для статуса:

getColor: d => d.delayed ? [255, 0, 0] : [0, 200, 0]

Временные треки движения

При добавлении временной оси данные могут содержать метки времени, а визуализация обновляться по фильтру:

getPath: d => d.track.filter(p => p.time > threshold)

3D траектории

Использование высоты позволяет строить пространственные пути:

path: [
  [0, 0, 0],
  [10, 10, 1000],
  [20, 5, 2000]
]

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

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

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

Поведение в разных масштабах

При изменении zoom уровня происходит перерасчёт экранной толщины линий. В meters-режиме слой стремится сохранить физическую ширину объекта, тогда как в pixels — визуальную консистентность.

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

Оглавление