首页 / deck.gl / API 文档

QuadkeyLayer

先看结论

Quadkey 瓦片图层。用 Bing Maps 的四边形编码定位瓦片，把每个 quadkey 还原成一个矩形，按属性着色或挤出。

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

new deck.QuadkeyLayer(props)

核心参数

参数	默认	说明
`data`	—	数据数组，元素可以是 quadkey 字符串或含该字段的对象
`getQuadkey`	取对象的 `quadkey` 字段	返回 quadkey 字符串的访问器
`getFillColor`	[0, 0, 0, 255]	矩形填充色
`getLineColor`	[0, 0, 0, 255]	矩形边界颜色
`getLineWidth`	1	边界宽度
`getElevation`	1000	挤出高度，米
`extruded`	false	是否拉伸为体块
`elevationScale`	1	高度倍率
`opacity` / `pickable`	1 / false	透明度与拾取

示例

var tiles = new deck.QuadkeyLayer({
  id: 'quadkey-coverage',
  data: tileStats,                 // [{ quadkey: '02313012', count: 812 }, ...]
  getQuadkey: function (d) { return d.quadkey; },
  getFillColor: function (d) {
    var v = Math.min(d.count / 1000, 1);
    return [40 + 200 * v, 130, 220 - 140 * v, 200];
  },
  getLineColor: [255, 255, 255, 90],
  getElevation: function (d) { return d.count * 2; },
  extruded: true,
  elevationScale: 1,
  pickable: true
});

quadkey 的层级含义

quadkey 的长度就是缩放层级，字符越多，覆盖范围越小。混用不同长度会让矩形大小差异极大，看起来不像同一套网格。聚合统计时应固定层级，或在图层中按长度分组渲染。

编码由经纬度逐级二分为四个象限得出，因此同一个父级 quadkey 是其后代的前缀。做上级汇总时，截取前缀即可归并，不需要重新计算瓦片坐标。

与 TileLayer 的关系

需要显示瓦片图像时用 TileLayer 配合 TileLayer 的 getTileData； QuadkeyLayer 输出的是几何而不是图片，适合展示覆盖率、密度、瓦片级统计值这类只关心范围的数据。

v9 的不可变更新

deck.gl 9 的图层不可变，数据或高度映射变化都要重建图层。 clone 后交给 deckgl.setProps：

var next = tiles.clone({
  data: tileStatsV2,
  extruded: false
});

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

quadkey 与 XYZ 的 z 轴不同。quadkey 的第 0 位对应最高层级，与常见的 {z}/{x}/{y} 顺序正好相反。从其他瓦片体系转换时，先按位还原成行列号再拼接，否则矩形会落到错误位置。

引用本文

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