Начало работы

Плагин deck2gisLayer позволяет отрисовывать слои deck.gl на карте MapGL JS API.

Чтобы добавить слой deck.gl:

1. Подключите плагин deck2gisLayer и фреймворк deck.gl к своему проекту.
2. Инициализируйте deck.gl.
3. Создайте слой.
4. Добавьте слой на карту.

Чтобы работать с несколькими слоями на карте одновременно, см. инструкцию Работа с несколькими слоями.

1. Подключите плагин

При помощи тега script

После подключения карты добавьте следующие строки в код HTML-страницы:

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

При помощи npm

Если вы используете npm, подключите библиотеку с помощью пакета @2gis/deck2gis-layer:

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

Совместимость версий

Текущая версия плагина deck2gisLayer совместима только с версией deck.gl@^8.

2. Инициализируйте deck.gl

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

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

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

3. Создайте слой

Чтобы создать слой deck.gl, используйте Deck2gisLayer.

Например, вы можете создать слой HexagonLayer, который визуализирует данные в виде тепловой карты, состоящей из гексагонов. Цвет и высота гексагона зависят от объектов, которые он содержит.

Пример создания слоя HexagonLayer:

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

const data = [
    {
        point: {
            lon: 37.615655,
            lat: 55.768005,
        },
    },
];

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

Где:

• point — координаты точек с данными.
• id — идентификатор слоя. Должен быть уникальным в рамках всех слоёв стиля карты.
• deck — экземпляр Deck, который управляет визуализацией слоя.
• type — тип слоя (Layer) из deck.gl.
• radius — радиус гексагона в метрах.
• getPosition — метод для вычисления координат объектов.

Более подробную информацию о параметрах см. в документации deck.gl к каждому слою.

4. Добавьте слой

Перед добавлением слоя на карту стиль карты должен быть загружен, иначе он перезапишет предыдущий стиль и удалит добавленные слои. Используйте обработчик события styleload, который срабатывает каждый раз после установки нового стиля:

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

Подробнее см. в инструкции Дополнение текущего стиля карты «на лету».

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