Получение данных слоя deck.gl

Вы можете получать данные:

• только об объектах слоёв deck.gl;
• одновременно об объектах слоёв deck.gl и объектах, добавленных на карту MapGL JS API.

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

1. Инициализируйте карту

При инициализации карты MapGL JS API установите флаг forceSyncIdentify: true. В MapGL JS API объекты идентифицируются по умолчанию асинхронно, а в deck.gl — синхронно. Установка флага позволяет синхронизировать эти процессы и получать информацию о выбранных объектах при клике на карту из обоих источников одновременно.

Пример добавления флага forceSyncIdentify при инициализации карты:

const map = new mapgl.Map('container', {
    center: [37.615655, 55.751005],
    zoom: 13,
    key: 'Your API access key',
    // Включение флага forceSyncIdentify для синхронного получения информации о выбранных объектах
    forceSyncIdentify: true,
});

2. Настройте получение данных

Из слоя deck.gl

С помощью встроенной обработки событий в deck.gl можно определять, какой объект и слой находятся в точке на карте.

Чтобы получать информацию из слоя визуализации deck.gl, добавьте в его настройки следующие параметры:

• pickable: true — поддержка выбора объектов слоя;
• depthTest: false — отключение проверки глубины.

Вы можете использовать методы deck.gl для обработки событий взаимодействия со слоем, например onClick, onHover и других. Подробнее см. в документации по взаимодействию со слоями deck.gl.

Пример обработчика события onClick (клик на карту) для слоя HexagonLayer:

const deckHexagonLayer = new Deck2gisLayer({
    id: 'deckgl-HexagonLayer',
    deck,
    type: HexagonLayer,
    data,
    radius: 250,
    getPosition: (d) => [d.point.lon, d.point.lat],
    pickable: true,
    parameters: { depthTest: false },
    onClick: ({ object, x, y }) => {
        if (object) {
            console.log('Клик на гексагон:', object);
        }
    },
});

Из слоя deck.gl и из карты

Вы можете получать информацию из слоя визуализации deck.gl и из карты MapGL JS API одновременно.

Пример обработчика события click (клик на карту):

import { Deck } from '@deck.gl/core';
import { Deck2gisLayer, initDeck } from '@2gis/deck2gis-layer';

const deck = initDeck(mapInstance, Deck, { antialiasing: 'msaa' });

map.on('click', (event) => {
  const pickCoords = {
      x: event.point[0],
      y: event.point[1],
  };

  const pickedObject = deck.pickObject(pickCoords);

  console.log('Deck picked object:', pickedObject);
  console.log('MapGL click event:', event);
});

Метод pickObject() используется для определения объекта, который был выбран при клике на карту. Это позволяет одновременно обрабатывать взаимодействия с картой и со слоями deck.gl. Если несколько объектов перекрываются, для получения информации о них используйте метод pickObjects().

Если вы используете React, вы можете использовать любой менеджер состояний для отображения информации о выбранных объектах в пользовательском интерфейсе (например, во всплывающем окне или на боковой панели):

// Инициализация deck.gl
const deck = initDeck(map, Deck, { antialiasing: 'msaa' });

// Доступ к selectedObject и setSelectedObject
const [selectedObject, setSelectedObject] = useState(undefined);

// Обработчик события клика на карту
useMapEffect(({mapInstance }) => {
  const handleClick = (event) => {
    const pickCoords = {
        x: event.point[0],
        y: event.point[1],
    };

    const pickedObject = deck.pickObject(pickCoords);

    setSelectedObject({
      pickedObject,
      mapEvent: event,
    });
  };

  mapInstance.on('click', handleClick);

  return () => {
    mapInstance.off('click', handleClick);
  };
}, [deck]);

// Использование данных о выбранном объекте
{selectedObject && (
  <div className="popup">
    <h3>Selected Object</h3>
    <pre>{JSON.stringify(selectedObject, null, 2)}</pre>
  </div>
)}