经纬志
首页 / deck.gl / 使用示例

最小骨架

二十行左右的骨架,去掉 React、去掉底图,只留 Deck 与一个图层。后续示例都是在这个结构上加图层。

deck.gl 9.0 · 更新 2026-10-28
源码与运行效果
运行效果

说明

Deck 的构造函数只关心画布、视野、图层三件事。initialViewState 在初始化时生效一次,之后的拖拽由 controller 接管,不需要自己写事件。

图层的 id 在同一场景里必须唯一,更新数据用 setProps 而不是重建 Deck。把实例挂在 window 上方便在控制台里试。

配置作用
canvas原生 canvas 元素,Deck 直接接管 WebGL 上下文
controller: true开启拖拽、缩放、俯仰
initialViewState经度、纬度、缩放、俯仰、朝向
getTooltip返回字符串即显示提示,返回 null 则隐藏

骨架里最容易出问题的是画布尺寸:canvas 必须由 CSS 撑开,Deck 的 width / height 用 '100%' 让它跟随容器。