一句话概览：deck.gl 是用 WebGL 做大规模数据可视化的图层框架，核心是「数据进、图层出」：把数组交给图层，它负责把几十万条记录画进 GPU。常见图层包括散点、弧线、多边形、网格聚合与三维体块，拾取与交互由框架统一处理。
教程13 篇
聚合图层：六边形与热力
聚合图层的输入是原始点位，输出是空间单元。选择六边形、网格还是热力， 取决于要表达「多少个」还是「有多密」，两者对半径单位的…
02动画与过渡
deck.gl 没有内置时间轴，动画靠每帧更新属性实现。 能交给 transitions 的插值就不要自己算，能用着色器完成…
03与底图结合：瓦片、投影与偏移
deck.gl 不提供底图，只提供坐标系。要让数据落在地图上， 要么自己加载瓦片，要么把它挂到已有的地图库里。 两条路都绕不…
04社区精选资源
deck.gl 的资料密度很高，但入口分散在官网文档、示例站与几个兄弟仓库（loaders.gl、luma.gl）之间。 这…
05自定义图层
内置图层覆盖了大多数场景，但「点位带光晕和标注」这类固定组合， 每次都在外部拼装既重复又难复用。自定义图层的价值在于封装，而…
06数据源与二进制属性
同一批点可以用对象数组、GeoJSON 或二进制缓冲三种方式交给图层。 前两种写起来快，第三种省内存和解析时间，选择取决于数…
07光照与后处理效果
deck.gl 的效果不是滤镜，而是渲染管线的一环。光照只影响有体积的图层， 后处理作用于最终画面，两者都会增加每帧的渲染开…
08图层类型与数据映射
deck.gl 里没有「要素样式」这种概念，只有图层和访问器。 同一个数组，换一组访问器，就能从散点变成热力、柱体或者路径。…
09在网页里跑起一个 deck.gl 图层
deck.gl 的核心不是「画地图」，是「用 GPU 把海量数据画成图层」。 它可以脱离任何底图独立运行，这一点让起步比想象…
10性能调优：让十万级数据跑满帧
deck.gl 慢，绝大多数时候不是 GPU 画不动，而是 JavaScript 在每帧重复做无用功。 先定位瓶颈，再决定是…
11拾取与交互
deck.gl 的拾取不是命中测试，而是把每个图元编码成颜色再读回来。 因此默认所有图层都不可拾取，要显式打开，并且每帧的拾…
12瓦片图层：TileLayer 与 MVTLayer
数据超过几十万条时，一次性下载和建模都不可行。瓦片图层把请求拆到不同缩放级别， 只加载当前视野需要的切片，渲染再交给子图层完…
13视图与坐标系
视图决定「从哪里看」，坐标系决定「数据放在哪」。 两者都写错时，画面往往不是报错，而是一片空白或者整体错位， 所以需要先把它…
API 文档45 个
使用示例60 个
聚合过渡
五万个点同时用 800 米与 2.2 公里两套六边形分箱， 切换时两者透明度此消彼长，聚合粒度在 0.8 秒内完成过…
查看示例
逐帧动画
呼吸灯效果：一圈淡色光晕周期性放大缩小。动画循环自己写，只改一个全局缩放属性。
查看示例
弧线飞线
以北京、上海为起点连接十座城市，弧高与线宽由客流决定， 两端颜色从蓝渐变到橙，透明度缓慢脉动。
查看示例
弧线弯曲
同一批 OD 数据，弧顶高度按距离分段设置，倾斜角让长弧不遮挡短弧。
查看示例
叠加 Esri 底图
暗灰底图配亮色数据，瓦片按需加载，勾选框可以随时关掉底图只看数据。
查看示例
位图图层
一张图片按经纬度范围贴到地图上，随视角缩放旋转，适合历史影像、扫描图、栅格分析结果。
查看示例
最小骨架
二十行左右的骨架，去掉 React、去掉底图，只留 Deck 与一个图层。后续示例都是在这个结构上加图层。
查看示例
笔刷扩展
鼠标周围一圈内的点保持原色，圈外的点压暗。这个效果不需要写事件，扩展自己在着色器里算距离。
查看示例
点击选中
点击任意柱体，选中项单独描边并显示数值，点击空白处取消。
查看示例
碰撞避让
标签密集时自动隐藏相互重叠的低优先级项，只保留重要地名。避让在 GPU 侧完成，不需要预先排版。
查看示例
三维柱状
十八乘十八共三百二十四根柱体排成阵列，高度由三个高斯峰叠加而成。 拖动倍率滑杆或重算分布，柱体的高低关系随之改变。
查看示例
柱状密度
规则网格上的一千根柱子，高度按密度取值，正六边形截面减少顶点数量。
查看示例
自定义组合图层
把「点 + 文字」封装成一个图层，对外只暴露数据和两个参数，内部自己拼子图层。
查看示例
等值线
四百个温度观测点聚合成五级等值带，阈值固定，颜色随层级加深。
查看示例
数据过滤扩展
四千个点只显示某个年份区间的部分。过滤在着色器里完成，数据数组原封不动，因此拖滑块不掉帧。
查看示例
数据增量更新
每两秒新增一批监测点，旧点保留，图层 id 不变，只替换 data 引用。
查看示例
图案填充
用纹理而不是纯色区分区块，打印出来也能分辨。图案来自一张图集，加上每个图案在图集里的矩形位置。
查看示例
渲染帧率
十万个点每帧更新半径，数据只创建一次，右上角显示最近一秒的帧率。
查看示例
GeoJSON 面
四个高斯中心圈出四片区域，落在其中的方格被保留，组成一个 FeatureCollection。按密度上色并挤出高度，…
查看示例
要素过滤
切换阈值后只保留达标要素，隐藏的要素同时退出拾取，不会出现点了空白却弹出提示。
查看示例
GeoJSON 样式
一份混合类型的 GeoJSON，面按等级配色、线加粗、点带描边，样式全在回调里。
查看示例
大圆航线
球面上两点之间的最短路径是大圆弧，投影到平面上看起来是弯的。跨洲航线用这种画法才不失真。
查看示例
网格聚合
六万个点沿一条东西向走廊分布，用 700 米方格统计。 切换颜色的聚合方式，同一批格子会讲出完全不同的故事。
查看示例
三维网格
颜色表达平均强度，柱子高度表达总量，同一批点在一张图里给出两种统计。
查看示例
热力图
四点二万个点集中在五片区域，用核密度压成连续色场。 拖动滑杆改变核半径，可以看到密度表达的粒度如何变化。
查看示例
热力图权重
两批点数量相同、权重不同，热力分布明显偏向权重高的一侧。
查看示例
六边形聚合
九万个点落在六片聚集区，按米制半径分箱后拉成棱柱。 切换 600 米到 2.5 公里四档半径，观察统计单元如何改变结…
查看示例
六边形半径
拖动滑块改变六边形半径，单元数量与形态随之变化，同一批数据呈现不同细节。
查看示例
三维公路
同一条路径画三层：路肩、路面、中心标线。宽度用米，跟着地理尺度缩放，倾斜视角下才有公路的纵深感。
查看示例
悬停高亮
鼠标划过柱体时自动提亮，移开恢复，代码里没有额外的选中变量。
查看示例
图标标注
三种图标全部由 canvas 现场绘制并导出为 data URL， 二百四十个点位按类型取图、按评分定大小、按类别染…
查看示例
自定义图标图集
图标在画布里画好再转成 data URL，四种状态共用一张图集，切换只改图标名。
查看示例
图层开关
底图、网格、点位三层独立控制，关闭的图层同时退出渲染与拾取。
查看示例
线图层
十条城市之间的连线，宽度取流量的平方根，低值不会被高值压成难辨的细线。
查看示例
叠加 MapLibre 底图
deck 图层挂在 MapLibre 的相机上，底图负责地理语境，deck 负责数据，两者共享同一套经纬度与视角。
查看示例地图视图
按下按钮，视角从全国范围平滑飞到城市范围，过程由插值控制。
查看示例
遮罩扩展
用一个面图层当模板，目标图层只在模板覆盖的像素上出现。适合「只看某个辖区内的数据」这类需求。
查看示例轨道视图
一组三维散点，用轨道视图自由旋转，坐标原点是场景中心而不是某个经纬度。
查看示例
地图与图层叠加
底图由 TileLayer 加载栅格瓦片，其上叠十条航线、十个节点与城市标签。 取消勾选底图，就能看清 deck.g…
查看示例
路径动画
十条环状巡游轨迹共一千六百个顶点，按时间戳逐段点亮， 尾部逐渐消散。底层保留完整线路，随时能看清路径全貌。
查看示例
路径分级
一张简化路网，快速路最宽、支路最细，颜色按等级分三档。
查看示例
性能对比
二十六万个点，两套渲染配置。切换后观察右上角帧率， 能直观看到描边、抗锯齿、拾取与多层叠加各自带来的代价。
查看示例
拾取高亮
六千个点位散布在城区，点击任意一个，用白色环和淡蓝光晕框住它， 左下角面板同步显示编号、坐标、流量与等级。
查看示例三维点云
一条螺旋点云，按高度从蓝渐变到橙，用轨道视图旋转观察，坐标不参与地理投影。
查看示例
虚线描边多边形
行政区、规划范围常用虚线表达「待定边界」。PolygonLayer 本身不支持虚线，需要挂 PathStyleExt…
查看示例
面挤出
九个面按数值拉出不同高度，侧面受光照影响，旋转后能看到体积。
查看示例
面图层填充
六个面按数值着色，填充色在青色与橙色之间插值，描边不随缩放变粗，拖拽可以换角度观察。
查看示例
Quadkey 瓦片索引
Quadkey 用一串 0–3 的数字表示四叉树上的瓦片位置，长度即层级。Bing 系瓦片、部分统计格网都用它当主键…
查看示例点与标签
散点负责位置与数值，文字负责名称，两层共用一个数组，改数据只改一处。
查看示例
散点图层
十万个点一次性渲染，按数值映射颜色，可以拖拽旋转和滚轮缩放，悬停显示坐标。
查看示例
屏幕网格聚合
两万个点按屏幕像素聚合，格子随视口固定大小，适合快速判断密度分布。
查看示例
文字标注
十八座城市以大写字母与指数组成标签，字号按指数放大， 深色背景框加细描边，在全国视角下仍然清晰。
查看示例
文字样式
中文标注显式给出字符集，字号按等级分三档，深色底图上加背景板保证可读。
查看示例
瓦片图层
TileLayer 按视口计算需要哪些瓦片，加载、缓存、淘汰都自动完成。示例把瓦片内容换成现场绘制的图片，接口形状与…
查看示例
属性过渡
点击按钮切换两档半径，点的大小在八百毫秒内平滑变化，不会突然跳变。
查看示例
轨迹回放
六条轨迹按同一时钟推进，当前时刻之后的部分隐藏，尾迹长度控制可见范围。
查看示例
拖尾长度
同一组轨迹画两遍，尾迹一个三十秒、一个一百二十秒，长尾迹能看出完整行程。
查看示例
控制器限制
锁定俯仰与方位，只允许平移缩放，缩放下限到 3 级，避免用户滑出数据范围。
查看示例
多视图联动
左侧散点、右侧网格，共用一份数据，两张视图各自可拖拽缩放。
查看示例
视图过渡动画
四片点云分别在四座城市，点击按钮后相机在 1.5 秒内完成 平移、缩放与俯仰变化，中途不可拖拽，结束后恢复交互。
查看示例