Интеграция deck.gl с Mapbox GL JS строится на принципе разделения обязанностей между рендерером карты и слоем высокопроизводительной визуализации данных. Mapbox GL JS управляет базовой картографической сценой, тайлами, стилями и камерой, тогда как Deck.gl добавляет поверх WebGL-слоя вычислительно сложные визуализации: большие наборы точек, траекторий, полигонов и 3D-объектов.
Ключевой технический момент заключается в том, что обе библиотеки используют один и тот же графический контекст WebGL, что позволяет избежать дублирования ресурсов и обеспечивает согласованную работу камеры.
В связке Mapbox GL JS выступает как основной контроллер сцены:
Deck.gl подключается как внешний слой (custom layer), который внедряется в жизненный цикл рендеринга Mapbox GL JS.
Важное следствие такой архитектуры — Deck.gl не создает собственный canvas, а использует тот же WebGL context, что и Mapbox GL JS.
Основной способ интеграции — использование интерфейса
customLayer в Mapbox GL JS.
const deckLayer = {
id: 'deck-overlay',
type: 'custom',
renderingMode: '3d',
onAdd(map, gl) {
this.deck = new Deck.DeckGL({
gl,
layers: []
});
},
render(gl, matrix) {
this.deck.setProps({
viewState: {
longitude: 37.6173,
latitude: 55.7558,
zoom: 10,
pitch: 45,
bearing: 0
}
});
this.deck.redraw();
}
};Mapbox GL JS вызывает методы:
onAdd при добавлении слояrender на каждом кадреonRemove при удалении слояОдним из ключевых аспектов интеграции является синхронизация состояния камеры Mapbox и Deck.gl.
Mapbox GL JS хранит состояние камеры в формате:
Deck.gl использует viewState, который должен быть
синхронизирован с состоянием Mapbox.
function getViewState(map) {
const center = map.getCenter();
return {
longitude: center.lng,
latitude: center.lat,
zoom: map.getZoom(),
pitch: map.getPitch(),
bearing: map.getBearing()
};
}Эта функция вызывается в каждом цикле рендеринга, обеспечивая строгую синхронизацию слоев.
Внутри Deck.gl используется проекция Web Mercator, идентичная той, что применяется в Mapbox GL JS. Это обеспечивает совпадение координат и отсутствие геометрических искажений между слоями.
Основные свойства:
Сильная сторона Deck.gl проявляется при работе с массивами геопространственных данных:
Mapbox GL JS не предназначен для вычислительно сложной агрегации, тогда как Deck.gl использует GPU-ускоренные шейдеры.
import {ScatterplotLayer} from '@deck.gl/layers';
const layer = new ScatterplotLayer({
id: 'scatter',
data: points,
getPosition: d => [d.lng, d.lat],
getRadius: 100,
getFillColor: [255, 140, 0],
radiusUnits: 'meters'
});Этот слой может быть добавлен поверх карты Mapbox без конфликтов рендеринга.
Deck.gl строится на концепции многослойной сцены:
Mapbox GL JS при этом остается базовым визуальным фоном.
const layers = [
new deck.ArcLayer({
id: 'arcs',
data: flights,
getSourcePosition: d => d.from,
getTargetPosition: d => d.to,
getSourceColor: [0, 128, 255],
getTargetColor: [255, 0, 128]
}),
new deck.ScatterplotLayer({
id: 'points',
data: airports,
getPosition: d => d.coordinates,
getRadius: 50000
})
];Mapbox GL JS обрабатывает события мыши и касаний, но Deck.gl может перехватывать их через собственные обработчики.
Основные типы событий:
new ScatterplotLayer({
id: 'interactive-points',
data,
pickable: true,
onClick: info => {
console.log('Feature:', info.object);
},
onHover: info => {
console.log('Hover:', info.object);
}
});Интеграция опирается на WebGL pipeline:
Mapbox GL JS использует аналогичный pipeline для тайлов, но Deck.gl расширяет его для пользовательских данных.
Критический аспект интеграции — совместное использование WebGL context:
Ошибки часто возникают при:
Mapbox GL JS использует style layers:
Deck.gl располагается поверх всех этих слоев как отдельный визуальный слой, не участвующий в style specification.
При высокой нагрузке важно учитывать:
Deck.gl оптимизирует рендеринг через:
Deck.gl поддерживает временные ряды данных, что особенно важно при наложении на карту Mapbox.
new TripsLayer({
id: 'trips',
data,
getPath: d => d.path,
getTimestamps: d => d.timestamps,
currentTime: time,
trailLength: 180
});Mapbox GL JS обеспечивает стабильную камеру, а Deck.gl обновляет временную компоненту сцены.
Обе системы используют Web Mercator:
Deck.gl дополнительно использует матрицы трансформации для перехода между:
Deck.gl не конфликтует с Mapbox Style Specification, но требует учета:
Mapbox управляет базовой визуальной иерархией, Deck.gl добавляет вычислительные слои поверх.
В продвинутых приложениях используется следующая структура:
Такая архитектура позволяет разделить визуализацию и бизнес-логику.
При потоковых обновлениях:
Deck.gl эффективно обновляет только изменившиеся части сцены.
При включении renderingMode: '3d':
Mapbox обеспечивает географическую сцену, Deck.gl — объекты в пространстве.
Custom layer проходит этапы:
Ошибки утечек чаще всего связаны с: