deck-gl

项目地址： https://github.com/visgl/deck.gl

官方文档： https://deck.gl/

最新版本： 9.4.0（截至 2026-10，npm deck.gl 与 GitHub Release 一致）

许可证： MIT（gh api repos/visgl/deck.gl --jq '.license.spdx_id' 核实）

概述

deck.gl 是 vis.gl 项目（OpenJS Foundation 托管）推出的 Web 数据可视化框架，基于 WebGL2/WebGPU（底层 luma.gl）把数据映射为 GPU 图层，再通过视图（view）渲染。它面向大规模数据：百万级点位、海量 GeoJSON 面、矢量瓦片均可交互式渲染，是 WebGIS 前端在数据量超过常规 DOM/SVG 方案时的首选。核心架构是「图层（Layer）+ 视图（View）」组合式设计，并与 MapLibre / Mapbox / Google Maps / ArcGIS 底图集成。

• GPU 渲染：数据以属性缓冲上传显存，顶点/片元着色器完成绘制，CPU 只负责一次性数据展开
• 图层目录：基础图层（Scatterplot、GeoJson、Path、Polygon、Icon、Text）、地理图层（Tile、MVT、Terrain、H3）、聚合图层（Hexagon、Grid、ScreenGrid、Heatmap、Contour）
• 多视图：MapView、OrthographicView、FirstPersonView、GlobeView，一个 Deck 实例可同时承载多个视图
• 底图集成：@deck.gl/mapbox 提供 MapboxOverlay，支持叠加（overlaid）与交错（interleaved）两种模式
• 交互内置：GPU 拾取（picking）、悬停/点击回调、tooltip、高亮与过滤

---

环境准备

安装

按需选择整包或子包：整包 deck.gl 含全部子模块且可 tree-shaking；子包体积更小，但各子包版本需手动保持一致。

npm install deck.gl                 # 整包（含全部功能）
npm install @deck.gl/core @deck.gl/layers   # 最小组合：核心 + 基础图层
npm install @deck.gl/core @deck.gl/layers @deck.gl/aggregation-layers @deck.gl/geo-layers @deck.gl/react
npm install @deck.gl/mapbox maplibre-gl     # 与 MapLibre / Mapbox 底图集成

子包	作用
@deck.gl/core / @deck.gl/layers	Deck、视图、控制器、图层基类与基础图层
@deck.gl/aggregation-layers / @deck.gl/geo-layers	聚合图层；地理图层（Tile、MVT、Terrain、H3、S2）
@deck.gl/mesh-layers	3D 网格与场景图（SimpleMesh、Scene）
@deck.gl/mapbox / @deck.gl/maplibre	Mapbox / MapLibre GL JS 集成入口
@deck.gl/react / @deck.gl/json	React 封装组件 DeckGL；JSON 声明式图层配置

CDN 快速试用

<script src="https://unpkg.com/[email protected]/dist.min.js"></script>

验证

独立渲染一个 ScatterplotLayer，页面出现可拖拽缩放的散点即环境正常。Deck 创建的 canvas 是透明覆盖层，独立使用时通常需自行放置底图或设置页面背景。

import {Deck} from '@deck.gl/core';
import {ScatterplotLayer} from '@deck.gl/layers';

new Deck({
  initialViewState: {longitude: -122.45, latitude: 37.8, zoom: 11},
  controller: true,
  layers: [
    new ScatterplotLayer({
      data: [{position: [-122.45, 37.8], radius: 100, color: [255, 0, 0]}],
      getPosition: d => d.position,
      getRadius: d => d.radius,
      getFillColor: d => d.color,
      pickable: true
    })
  ],
  getTooltip: ({object}) => object && '命中散点'
});