首页 / deck.gl / API 文档

ContourLayer

先看结论

把散点聚合成网格，再按阈值抽出等值带或等值线。

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

new deck.ContourLayer(props)

参数

参数	默认	说明
`data` / `getPosition`	—	参与聚合的散点
`getWeight`	`1`	单点权重
`cellSize`	`1000`	聚合网格边长，米
`contours`	`[]`	阈值数组，元素可带 `color` 与 `strokeWidth`
`aggregation`	`'SUM'`	`SUM`、`MEAN`、`MIN`、`MAX`
`colorRange`	内置	色带，未单独指定颜色时使用
`gpuAggregation`	`true`	GPU 聚合
`zOffset`	`0.005`	抬升比例，避免与底图重叠闪烁

示例

new deck.ContourLayer({
  id: 'contour',
  data: samples,
  getPosition: function (d) { return [d.lng, d.lat]; },
  getWeight: function (d) { return d.temp; },
  cellSize: 600,
  aggregation: 'MEAN',
  contours: [
    { threshold: 10, color: [40, 90, 160], strokeWidth: 1 },
    { threshold: 14, color: [40, 160, 170], strokeWidth: 1 },
    { threshold: 18, color: [240, 190, 80], strokeWidth: 1 },
    { threshold: 22, color: [230, 100, 60], strokeWidth: 1 }
  ]
});

阈值怎么定

等距阈值在偏态数据上会挤在一起。先算分位数，按 20%、40%、60%、80% 取阈值，等值带的面积更均衡。阈值顺序必须递增，倒序会让绘制结果错乱。

与 HeatmapLayer 的分工

热力图表达连续强弱，没有边界。等值带表达区间，可以有明确的边界和分级配色，适合做分区统计与报告插图。

cellSize 别忘了单位是米。按经纬度度数填 0.01，在城市尺度上等于每格十几米，聚合网格会细到失去意义。

引用本文

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