Отрисовка слоев deck.gl на карте MapGL

Плагин Deck2gisLayer позволяет отрисовать слои deck.gl используя canvas и WebGL контекст карты.

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

<script src="https://unpkg.com/@2gis/deck2gis-layer@^1/dist/deck2gislayer.js"></script>
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

Также можно установить плагин с помощью npm:

npm install @2gis/deck2gis-layer @deck.gl/core @deck.gl/layers

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

1. Инициализация

Для работы с плагином Deck2gisLayer, сначала нужно создать экземпляр deck.gl, проинициализировав его с помощью функции initDeck.

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

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

Вспомогательная функция initDeck - инициализирует экземпляра Deck.gl и свяжет его с картой.

Следующим шагом после инициализации deck.gl будет создание слоев для карты.

2. Создание слоя deck.gl c помощью обертки Deck2gisLayer

Deck2gisLayer:

В качестве примера добавим слой (HexagonLayer). HexagonLayer объединяет данные в тепловую карту на основе шестиугольника. Цвет и высота шестиугольника определяются на основе содержащихся в нем объектов.

import { HexagonLayer } from '@deck.gl/aggregation-layers/typed';

const data = [
    {
        point: {
            lon: 55.296872,
            lat: 25.261885,
        },
    },
];

const deckHexagonLayer = new Deck2gisLayer({
    id: 'deckgl-HexagonLayer',
    deck,
    type: HexagonLayer,
    data,
    radius: 250,
    getPosition: (d) => [d.point.lon, d.point.lat],
});

При инициализации слоя Deck2gisLayer необходимо указать обязательные атрибуты:

id (string) - идентификатор слоя, уникальный в рамках всех слоев стиля карты.
deck (Deck) - экземпляр Deck, который управляет визуализацией этого слоя.
type (Layer) - Класс, расширяющий базовый класс Layer из deck.gl
[...] — задаем атрибуты нужные для отрисовки выбранного deck.gl слоя. Смотрите список слоев и примеры использования в документации deck.gl

3. Добавление слоя Deck2gisLayer на карту

Важно дождаться загрузки стиля карты, прежде чем добавлять новый слой, поскольку загруженный стиль полностью затрет все добавленные слои. Для этого используется событие styleload, которое всплывает каждый раз после установки нового стиля, подробнее в примере использования addLayer.

map.on('styleload', () => {
    map.addLayer(deckHexagonLayer);
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2GIS Map API</title>
    <meta name="description" content="Deck2gis-layer plugin example" />
    <style>
        html,
        body,
        #container {
            margin: 0;
            width: 500px;
            height: 300px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
    <script src="https://unpkg.com/@2gis/deck2gis-layer@^1/dist/deck2gislayer.js"></script>
    <script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

    <div id="container"></div>
    <script>
        const map = new mapgl.Map('container', {
            center: [55.296872, 25.261885],
            zoom: 12.5,
            key: 'Your API access key',
        });
        const deckgl = new deck.Deck(mapgl.Deck2gisLayer.initDeck2gisProps(map));
        const data = [
            {
                point: {
                    lon: 55.296872,
                    lat: 25.261885,
                },
            },
            {
                point: {
                    lon: 55.296644,
                    lat: 25.262364,
                },
            },
            {
                point: {
                    lon: 55.299031,
                    lat: 25.254415,
                },
            },
            {
                point: {
                    lon: 55.299031,
                    lat: 25.254415,
                },
            },
        ];
        const deckHexagonLayer = new mapgl.Deck2gisLayer({
            id: 'deckgl-HexagonLayer',
            deck: deckgl,
            type: deck.HexagonLayer,
            data,
            radius: 480,
            getPosition: (d) => [d.point.lon, d.point.lat],
        });
        map.once('styleload', () => {
            map.addLayer(deckHexagonLayer);
        });
    </script>
</body>

</html>