经纬志
首页 / deck.gl / 教程

社区精选资源

先看结论

deck.gl 的资料密度很高,但入口分散在官网文档、示例站与几个兄弟仓库(loaders.gl、luma.gl)之间。 这一页把这些入口按用途收拢,每条只给一句说明和它解决的问题,正文仍以官方文档与示例源码为准。 照着"先看哪一类"的表走,基本不用在搜索结果里反复试错。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-29 · 引用本文

先看哪一类

当前的处境直接去哪为什么
想先看效果再决定要不要用官方示例库、kepler.gl示例可直接改数据;kepler.gl 不用写代码就能出图
要把瓦片服务叠上来TileLayer 文档MVT、栅格、WMS 的接入参数都在这一个页面
底图用 Mapbox 还是 MapLibreUsing with Mapbox GL JS / MapLibre两种接法的相机同步与图层顺序处理不同
数据格式五花八门loaders.glGeoJSON、CSV、点云、3D Tiles 统一加载
从 8.x 升到 9.0 报错upgrade-guide.mdluma.gl 9 带来的上下文与 API 变化集中写在这里

官方仓库与示例

  • deck.gl 官网:项目首页,给出版本、安装命令与文档入口。解决的问题:确认当前版本与包名,避免引用旧版 CDN。
  • 文档总入口:按 Getting Started、API Reference、Developer Guide 分区。解决的问题:先建立目录感,知道某类问题该去哪一章。
  • 官方示例库:按主题分类的可运行示例,多数带源码链接。解决的问题:需要"能改参数的完整例子"时,先在这里找同类效果。
  • visgl/deck.gl:源码、issue 与发布记录。解决的问题:文档没覆盖的行为,直接翻实现或搜 issue。
  • 仓库 examples 目录:示例源码与各自的依赖声明。解决的问题:把示例搬进项目时,确认它额外依赖了哪些包。
  • Gallery 示例画廊:官方演示的在线集合,含与 MapLibre、Mapbox 叠加的完整效果。解决的问题:先看交互效果再决定用哪种视图与图层组合。
  • What's New:按版本汇总的新特性与行为变化。解决的问题:判断某个图层或参数是不是最新才有的,避免在旧版本上试。
  • CHANGELOG:逐版本记录修复与破坏性变更。解决的问题:升级前确认哪个 API 被改名或移除。
  • Releases:带 tag 的发布记录。解决的问题:定位某特性最早出现的版本,回退时有明确目标。

关键文档:按需求直取

  • 图层目录:全部官方图层的分类清单,按 core、aggregation、geo、mesh 分组。解决的问题:先按数据形态选对图层,再进具体页面查参数。
  • TileLayer:瓦片图层,支持 MVT、栅格与自定义瓦片。解决的问题:把已有瓦片服务叠到 deck.gl 上,而不必依赖地图库。
  • GeoJsonLayer:直接渲染 GeoJSON,点线面各自可配访问器。解决的问题:GeoJSON 数据上图时,用访问器控制颜色、半径与描边。
  • IconLayer:图标图层,支持 atlas 与按字段切换图标。解决的问题:上万图标符号化时,避免逐条创建 DOM 标记。
  • HexagonLayer:把点聚合成六边形柱体,高度表示密度。解决的问题:需要空间密度可视化,又不想自己算网格聚合。
  • Deck 类:图层容器本身,管理视图、控制器与渲染循环。解决的问题:脱离 React 或 Mapbox 独立使用 deck.gl 时的入口。
  • Using with React:与 React 组合的标准写法。解决的问题:状态更新导致整层重建、动画掉帧这类集成问题。
  • Using with Mapbox:在 Mapbox 底图上叠加图层,含 overlaid 与 interleaved 两种模式。解决的问题:底图与图层坐标系、俯仰角对不齐,或图层盖住了标注。
  • Using with MapLibre:改用 MapLibre 作为底图时的接法。解决的问题:不想用需要 token 的 Mapbox 底图,又要保留同样的叠加能力。
  • 性能优化指南:数据更新、拾取与像素比的调优思路。解决的问题:十万级数据下卡顿,先按这份清单逐项排查。
  • 升级指南:跨大版本的迁移步骤与替换对照。解决的问题:8.x 升 9.0 时,旧写法批量报错的定位。
  • modules 目录:按子包拆分的源码结构(core、layers、geo-layers、aggregation-layers 等)。解决的问题:确认某个图层属于哪个包,按需引入减小体积。

开源项目与插件

  • kepler.gl:基于 deck.gl 的可视化工具,导入数据后拖拽配置即可出图。解决的问题:不想写代码,但要快速做一次空间数据探索或汇报图。
  • keplergl/kepler.gl:kepler.gl 的源码仓库,含本地部署与嵌入方式。解决的问题:需要把 kepler.gl 嵌进自己的系统,或改它的默认行为。
  • visgl/loaders.gl:统一的格式加载框架,覆盖 GeoJSON、CSV、点云、3D Tiles 等。解决的问题:数据来源格式杂,避免为每种格式各写一套解析。
  • loaders.gl 文档站:各 loader 的参数与流式加载说明。解决的问题:大文件分块加载、坐标系解析这类细节,查这里的 API。
  • visgl/luma.gl:deck.gl 底层的 WebGL/WebGPU 引擎。解决的问题:写自定义图层时需要直接操作着色器与缓冲区。
  • deck.gl-community:社区维护的扩展图层与工具包,含可编辑图层、图结构图层与额外底图集成。解决的问题:官方仓库之外还需要编辑、图分析等能力时的补充来源。
  • CARTO VL:声明式的空间可视化语法,早期与 deck.gl 生态配合使用。解决的问题:想用类似 SQL 的表达式定义样式时可以参考,但新项目建议直接用 deck.gl 图层。
  • pydeck:Python 与 Jupyter 的 deck.gl 绑定,说明与示例都在这里。解决的问题:在 notebook 或后端脚本里复用同一套图层配置。

数据与工具

  • deck.gl(npm):聚合包,一次引入全部官方图层。解决的问题:快速起步时不必逐个安装子包。
  • @deck.gl/core(npm):核心包,只含容器与基础能力。解决的问题:体积敏感时按需引入,避免把全部图层打进产物。
  • 仓库 docs 目录:文档的 Markdown 源文件。解决的问题:官网搜索不好用时,直接在仓库里全文检索关键词。
  • GitHub Issues:bug 与使用问题的公开记录。解决的问题:确认某个异常是已知缺陷,还是自己的数据或配置问题。

社区问答

  • Stack Overflow · deck.gl 标签:英文问答,偏集成与报错。解决的问题:与 React、Mapbox 组合时的具体错误。
  • OpenJS Slack 工作区:deck.gl 所在的 OpenJS 社区 Slack,双周会议与讨论在对应频道进行。解决的问题:需要和开发者、其他使用者直接交流时,比在 issue 里等回复更快。
  • r/gis:GIS 综合社区。解决的问题:deck.gl 与其他可视化方案的选型对比、性能经验。

注意事项

  • 图层不显示时先查 data 结构与 getPosition 的返回值,颜色与尺寸通常不是原因。
  • interleaved 模式要求 WebGL2,且与底图的图层顺序强相关;不确定时先用 overlaid 模式。
  • 9.0 起底层换成 luma.gl 9,自定义图层的模型创建要改成 Device 写法,旧代码不能直接迁移。

怎么判断一篇教程是否过时

三条线索:版本号是否写明 8.x 还是 9.x(9.0 起底层换成 luma.gl 9, WebGL 上下文相关的写法变动明显);日期是否在近两年内;API 是否已废弃, 例如仍从 @deck.gl/core 之外的老路径引入图层、或依赖已被移除的 DeckGL 旧组件写法。

用 npm 上的实际版本与时间做基准:

npm view deck.gl version
npm view @deck.gl/core version
npm view @deck.gl/core time.modified

再对照 docs/upgrade-guide.md:里面按大版本列出了删除项与替换项。 文中出现的类如果在该文件里被标为 deprecated 或 removed,无论示例跑不跑得起来,都该按过时处理。

跑一遍示例最快。把文章里的图层代码放进官方示例库的对应页面,或直接贴进官网的在线编辑器环境运行。 图层不显示通常不是语法错误,而是 getPosition 返回了 [lng, lat] 之外的结构, 或 data 变了却没触发更新——这两种都能在几秒内看出来。

引用本文

经纬志(2026)。《社区精选资源》。https://www.jingweizhi.com/deckgl/tutorial/community-picks.html(访问日期 2026-11-03)。