首页 / deck.gl / API 文档

ScatterplotLayer

先看结论

把每条数据画成一个圆点，是最基础也最常用的图层。

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

new deck.ScatterplotLayer(props)

核心参数

参数	默认	说明
`data`	`[]`	对象数组，或返回数组的 URL
`getPosition`	—	返回 `[经度, 纬度]`，可带第三位高度
`getRadius`	`1`	半径，单位由 `radiusUnits` 决定
`radiusUnits`	`'meters'`	`'meters'` 或 `'pixels'`
`radiusScale`	`1`	统一放大系数，不改变相对差异
`radiusMinPixels`	`0`	屏幕像素下限，缩小时防消失
`radiusMaxPixels`	`Number.MAX_SAFE_INTEGER`	屏幕像素上限，防糊满屏
`filled`	`true`	是否填充圆面
`stroked`	`false`	是否描边，开启后每条数据多一圈几何
`billboard`	`false`	圆面始终正对相机，倾斜视角下不变形
`antialiasing`	`false`	开启后边缘平滑，填充开销上升
`pickable`	`false`	是否参与拾取
`autoHighlight`	`false`	悬停自动高亮，无需写事件
`highlightColor`	`[0, 0, 128, 128]`	高亮叠加色

颜色与线宽访问器

访问器	返回	说明
`getFillColor`	`[r, g, b, a]`	0–255，a 省略时为 255
`getLineColor`	`[r, g, b, a]`	仅 `stroked: true` 时生效
`getLineWidth`	数字	单位由 `lineWidthUnits` 决定
`lineWidthUnits`	`'meters'`	同上，可设 `'pixels'`

示例

var layer = new deck.ScatterplotLayer({
  id: 'stations',
  data: stations,
  getPosition: function (d) { return [d.lng, d.lat]; },
  getRadius: function (d) { return Math.sqrt(d.flow) * 3; },
  radiusUnits: 'pixels',
  radiusMinPixels: 1.5,
  radiusMaxPixels: 18,
  getFillColor: function (d) {
    return d.flow > 500 ? [255, 140, 60, 200] : [70, 150, 255, 200];
  },
  stroked: true,
  getLineColor: [12, 20, 32, 200],
  lineWidthUnits: 'pixels',
  getLineWidth: 1,
  pickable: true,
  autoHighlight: true
});

性能要点

半径以像素计、关闭描边、关闭抗锯齿，是十万级点位的标准配置。 stroked 会把几何量翻倍，antialiasing 依赖额外的片元计算，两者叠加可能让帧率下降一半。

radiusUnits: 'meters' 时，低缩放层级下每个点的地面覆盖会迅速变大，填充率随之上升。把 radiusMaxPixels 设成 20–40，可以阻断这种情况。

圆点不是正圆。默认的几何体是有限边数的多边形，半径很小时看起来像方点。需要更圆的轮廓时提高 zoom，或改用 billboard 让它始终面向相机。

引用本文

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