首页 / deck.gl / API 文档

GPUGridLayer

先看结论

网格聚合图层。把点按固定大小的方格汇总，聚合在 GPU 上完成，百万级点也能实时出结果。

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

new deck.GPUGridLayer(props)

核心参数

参数	默认	说明
`data`	—	点数据数组
`getPosition`	必填	返回 `[lng, lat]` 或 `[lng, lat, z]`
`cellSize`	1000	每个格子的边长，米
`colorAggregation`	'SUM'	颜色取值方式：SUM / MEAN / MIN / MAX / COUNT
`getColorWeight`	1	参与颜色聚合的权重
`colorRange`	内置六色	颜色渐变数组，按聚合值映射
`colorDomain`	自动	`[min, max]`，固定映射区间，避免缩放时颜色跳变
`elevationAggregation`	'SUM'	高度取值方式
`getElevationWeight`	1	参与高度聚合的权重
`elevationScale`	1	高度倍率
`extruded`	false	是否挤出为柱体
`gpuAggregation`	true	是否使用 GPU 聚合，设备不支持时自动退回 CPU
`upperPercentile`	100	剔除高于该百分位的值，抑制离群点
`lowerPercentile`	0	剔除低于该百分位的值
`pickable` / `opacity`	false / 1	拾取与透明度

示例

var grid = new deck.GPUGridLayer({
  id: 'grid-density',
  data: taxiPoints,
  getPosition: function (d) { return [d.lng, d.lat]; },
  cellSize: 400,
  colorAggregation: 'COUNT',
  getColorWeight: 1,
  colorRange: [
    [255, 255, 204, 160],
    [199, 233, 180, 170],
    [127, 205, 187, 180],
    [65, 182, 196, 190],
    [44, 127, 184, 200],
    [37, 52, 148, 210]
  ],
  colorDomain: [0, 3000],
  elevationAggregation: 'COUNT',
  elevationScale: 12,
  extruded: true,
  upperPercentile: 98,
  pickable: true
});

拾取结果

命中格子时 info.object 里包含该格子的统计信息： position、count、colorValue、 elevationValue。读这些字段即可做悬浮提示，不需要再回原始点数组统计。

colorDomain 固定之后

不设 colorDomain 时，颜色范围按当前视图内的最大值动态计算，平移地图会让同一区域的颜色变化。业务上需要横向对比时，固定 [0, 上限]，超出的值自动截断。

v9 的不可变更新

deck.gl 9 的图层不可变，调整聚合参数要新建图层实例。用 clone 生成新对象，再交给 deckgl.setProps：

var next = grid.clone({
  cellSize: 200,
  elevationScale: 6
});

deckgl.setProps({ layers: [next] });

格子大小会随投影拉伸。cellSize 的单位是米，但换算成经纬度网格后，高纬度地区的格子在地图上看起来更宽。跨纬度对比数据时先做投影校正，或改用 H3HexagonLayer。

引用本文

经纬志（2026）。《GPUGridLayer》。https://www.jingweizhi.com/deckgl/api/gpu-grid-layer.html（访问日期 2026-11-03）。