Отрисовка слоев deck.gl на карте MapGL
Плагин Deck2gisLayer позволяет отрисовать слои deck.gl используя canvas и WebGL контекст карты.
Чтобы использовать слои deck.gl, нужно подключить плагин Deck2gisLayer
и фреймворк deck.gl
. Для этого нужно добавить следующее строки после подключения основного скрипта:
<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 install @2gis/deck2gis-layer @deck.gl/core @deck.gl/layers
Важно
Текущая версия плагина
Deck2gisLayer
совместима только с версиейdeck.gl@^8
Использование
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
В качестве примера добавим слой (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@^2/dist/deck2gislayer.js"></script>
<script src="https://unpkg.com/deck.gl@^8/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 = mapgl.Deck2gisLayer.initDeck(map, deck.Deck, { antialiasing: 'msaa' });
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>