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

Большинство примеров использования Deck.gl демонстрируют наложение визуализаций поверх картографических сервисов, таких как Mapbox, Google Maps или Carto. Однако архитектура библиотеки позволяет полностью отказаться от фоновой карты и использовать движок исключительно как высокопроизводительную систему визуализации данных.

Такой подход востребован в нескольких сценариях:

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

В этом режиме Deck.gl выступает не как надстройка над картой, а как самостоятельный WebGL-движок визуализации.

Координатные системы в Deck.gl

При работе без карты особенно важно понимать механизм координатных систем.

Обычно географические слои используют долготу и широту:

[longitude, latitude]

Например:

[37.6176, 55.7558]

Без базовой карты можно использовать произвольные координаты:

[x, y]

или

[x, y, z]

Например:

[150, 300]

или

[150, 300, 50]

Для подобных задач чаще всего применяется система координат:

COORDINATE_SYSTEM.CARTESIAN

Она отключает географические преобразования и заставляет Deck.gl воспринимать данные как обычное декартово пространство.

Пример:

import {COORDINATE_SYSTEM} from '@deck.gl/core';

const layer = new ScatterplotLayer({
  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN
});

Создание минимального Deck.gl-приложения

Без карты приложение становится значительно проще.

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

const deck = new Deck({
  initialViewState: {
    target: [0, 0, 0],
    zoom: 0
  },

  controller: true,

  layers: [
    new ScatterplotLayer({
      data: [
        {position: [100, 100]},
        {position: [300, 200]},
        {position: [500, 400]}
      ],

      coordinateSystem: 0,

      getPosition: d => d.position,
      getRadius: 20,
      getFillColor: [255, 0, 0]
    })
  ]
});

Здесь отсутствует любой картографический компонент. На экране будут отображаться только точки.

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

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

Она не имеет перспективных искажений и напоминает обычную двумерную систему координат.

Подключение:

import {OrthographicView} from '@deck.gl/core';

Создание:

const deck = new Deck({
  views: new OrthographicView(),

  initialViewState: {
    target: [500, 500, 0],
    zoom: 0
  },

  controller: true
});

Особенности ортографической проекции:

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

Работа с собственными диапазонами координат

Часто данные существуют в диапазоне, не связанном с размерами экрана.

Например:

0–10000

или

-5000–5000

Deck.gl спокойно работает с такими значениями.

const data = [
  {position: [1500, 4000]},
  {position: [7000, 8500]}
];

Камера настраивается через параметр target:

initialViewState: {
  target: [5000, 5000, 0],
  zoom: -2
}

Таким образом можно просматривать огромные пространства данных без дополнительного масштабирования.

Визуализация изображений как плоскости данных

Распространённая задача — отображение точек поверх изображения.

Например:

  • медицинские снимки;
  • спутниковые изображения;
  • чертежи;
  • схемы помещений;
  • фотографии.

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

Для этого применяется BitmapLayer.

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

Пример:

new BitmapLayer({
  image: '/images/floorplan.png',

  bounds: [
    0,
    0,
    1000,
    1000
  ]
});

Параметр bounds определяет координаты размещения изображения в виртуальном пространстве.

После этого поверх изображения можно рисовать любые слои Deck.gl.

Наложение точек поверх изображения

const pointsLayer = new ScatterplotLayer({
  data: [
    {
      name: 'Sensor 1',
      position: [250, 300]
    },
    {
      name: 'Sensor 2',
      position: [600, 700]
    }
  ],

  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

  getPosition: d => d.position,

  getRadius: 15,

  getFillColor: [255, 0, 0]
});

Слои объединяются:

layers: [
  bitmapLayer,
  pointsLayer
]

В результате формируется интерактивный план помещения с объектами поверх него.

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

PathLayer отображает линии и маршруты.

В декартовой системе координат он превращается в универсальный инструмент рисования.

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

Пример:

new PathLayer({
  data: [
    {
      path: [
        [100, 100],
        [300, 200],
        [500, 150]
      ]
    }
  ],

  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

  getPath: d => d.path,

  getColor: [0, 120, 255],

  getWidth: 5
});

Применение:

  • маршруты внутри зданий;
  • инженерные схемы;
  • производственные процессы;
  • графовые структуры;
  • траектории движения объектов.

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

Полигональные объекты также не требуют карты.

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

Пример:

new PolygonLayer({
  data: [
    {
      polygon: [
        [100, 100],
        [400, 100],
        [400, 400],
        [100, 400]
      ]
    }
  ],

  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

  getPolygon: d => d.polygon,

  getFillColor: [0, 200, 150, 120]
});

Подобным образом можно строить:

  • зоны безопасности;
  • помещения;
  • участки производства;
  • игровые области;
  • регионы анализа данных.

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

Deck.gl способен визуализировать полноценные трёхмерные сцены даже без карты.

Координаты получают вид:

[x, y, z]

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

{
  position: [100, 200, 50]
}

Значение z отвечает за высоту.

ColumnLayer в декартовой системе

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

Пример:

new ColumnLayer({
  data: [
    {
      position: [100, 100],
      value: 50
    },
    {
      position: [300, 200],
      value: 100
    }
  ],

  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

  getPosition: d => d.position,

  getElevation: d => d.value,

  radius: 20
});

Получается трёхмерная столбчатая диаграмма в произвольном пространстве.

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

Для полноценного просмотра трёхмерной сцены применяется OrbitView.

import {OrbitView} from '@deck.gl/core';

Настройка:

views: new OrbitView()

Пример состояния камеры:

initialViewState: {
  target: [0, 0, 0],

  rotationOrbit: 45,

  rotationX: 30,

  zoom: 2
}

Возможности:

  • вращение сцены;
  • изменение угла обзора;
  • масштабирование;
  • исследование объёмных данных.

Обработка событий объектов

Работа без карты не ограничивает интерактивность.

Можно использовать стандартные события Deck.gl.

Пример:

new ScatterplotLayer({
  data,

  pickable: true,

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

Событие возвращает:

{
  object,
  coordinate,
  index,
  layer
}

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

  • onClick;
  • onHover;
  • onDragStart;
  • onDrag;
  • onDragEnd.

Подсказки и всплывающие окна

Пример отображения информации при наведении:

new ScatterplotLayer({
  data,

  pickable: true,

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

Используя объект info, можно создавать:

  • всплывающие панели;
  • информационные карточки;
  • контекстные меню;
  • окна свойств объекта.

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

Отсутствие карты позволяет сосредоточить все ресурсы GPU на визуализации данных.

Deck.gl способен обрабатывать:

  • сотни тысяч точек;
  • миллионы вершин;
  • большие наборы линий;
  • объёмные трёхмерные сцены.

Практические рекомендации:

pickable: false

если выбор объектов не нужен.

Уменьшать число обновлений:

updateTriggers

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

Применять агрегационные слои для сверхкрупных наборов данных.

Комбинирование нескольких представлений

Одновременно можно отображать несколько независимых видов данных.

Пример:

views: [
  new OrthographicView({
    id: 'main'
  }),

  new OrbitView({
    id: 'preview'
  })
]

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

Подобная архитектура используется в:

  • CAD-системах;
  • научных пакетах анализа;
  • инструментах обработки изображений;
  • редакторах трёхмерных сцен;
  • системах мониторинга.

Типичные сценарии использования без базовой карты

Визуализация плана здания

Слои:

  • BitmapLayer для плана;
  • ScatterplotLayer для датчиков;
  • PathLayer для маршрутов;
  • PolygonLayer для помещений.

Научная визуализация

Слои:

  • PointCloudLayer;
  • ScatterplotLayer;
  • ColumnLayer.

Данные:

  • физические измерения;
  • результаты моделирования;
  • пространственные выборки.

Аналитические панели

Слои:

  • ScatterplotLayer;
  • TextLayer;
  • PathLayer.

Данные:

  • связи между сущностями;
  • графы;
  • сетевые структуры.

Визуализация изображений

Слои:

  • BitmapLayer;
  • PolygonLayer;
  • ScatterplotLayer.

Применение:

  • компьютерное зрение;
  • сегментация изображений;
  • разметка объектов;
  • медицинская диагностика.

Игровые интерфейсы

Слои:

  • BitmapLayer;
  • IconLayer;
  • TextLayer;
  • PathLayer.

Возможности:

  • карта игрового мира;
  • размещение юнитов;
  • отображение зон влияния;
  • визуализация маршрутов.

Ограничения режима без карты

При отказе от базовой карты становятся недоступны:

  • автоматические географические преобразования;
  • тайловые картографические сервисы;
  • геокодирование;
  • работа с долготой и широтой «из коробки»;
  • встроенная картографическая навигация.

При этом сохраняются основные возможности Deck.gl:

  • аппаратное ускорение WebGL;
  • система слоёв;
  • анимации;
  • выбор объектов (picking);
  • обработка событий;
  • работа с двумерной и трёхмерной графикой;
  • высокопроизводительная визуализация больших объёмов данных.

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

Оглавление