首页 / deck.gl / API 文档

ArcLayer

先看结论

连接两点的弧线，用于起点到终点的流向表达。弧高可调，两端颜色可独立指定。

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

new deck.ArcLayer(props)

核心参数

参数	默认	说明
`data`	`[]`	每条数据一条弧线
`getSourcePosition`	—	起点 `[经度, 纬度]`
`getTargetPosition`	—	终点 `[经度, 纬度]`
`getSourceColor`	`[0, 0, 0, 255]`	起点端颜色
`getTargetColor`	`[0, 0, 0, 255]`	终点端颜色，形成渐变
`getWidth`	`1`	线宽，单位见 `widthUnits`
`widthUnits`	`'pixels'`	弧线默认按像素，保证可见
`widthMinPixels`	`0`	像素下限
`widthMaxPixels`	无	像素上限
`getHeight`	`1`	弧顶高出起点的高度，是相对比例
`getTilt`	`0`	弧面绕连接线倾斜，度
`greatCircle`	`false`	沿大圆路径弯曲，跨洲航线更真实
`numSegments`	`50`	弧线分段数，越大越平滑
`pickable`	`false`	是否参与拾取

示例

var layer = new deck.ArcLayer({
  id: 'flows',
  data: flows,
  getSourcePosition: function (d) { return d.from; },
  getTargetPosition: function (d) { return d.to; },
  getSourceColor: [80, 190, 255, 220],
  getTargetColor: [255, 170, 80, 220],
  getWidth: function (d) { return 1 + Math.sqrt(d.volume) / 12; },
  widthUnits: 'pixels',
  widthMinPixels: 1,
  getHeight: function (d) { return 0.2 + d.volume / 4000; },
  greatCircle: true,
  pickable: true
});

弧高怎么调

getHeight 是与连接线水平距离成比例的相对值，不是米。取值 0.2 是低弧，1 是标准拱形，大于 2 会变成很高的抛物线。多个弧线交叉时，给不同方向的流量设置不同高度，可以减少重叠带来的视觉混乱。

倾斜视角下，弧线会与地面分离，产生「飞线」观感。正俯视时弧线几乎退化为直线，此时高度没有意义，需要把 pitch 提到 30 度以上。

大圆与椭球

greatCircle: true 让路径沿球面最短距离弯曲。跨洲航线如果不开启，线会在地图上呈现为一条突兀的直线，尤其是跨越 180 度经线时。开启后弧线自动处理经度环绕，不会横穿整幅地图。

场景	`greatCircle`
城市间通勤、省内物流	`false`，直线更直观
跨洲航线、国际迁徙	`true`，符合实际航路
需要跨越 180 度经线	`true`，避免横穿地图

颜色渐变

两端颜色不同时，弧线沿路径插值，天然表达方向。常见约定是蓝色表示流出、橙色表示流入。宽度与颜色同时编码同一个数值会造成信息重复，更清晰的做法是宽度表示量、颜色表示类别。

弧线数量过多会织成一张网。几百条弧线已经难以辨认，优先按流量取前 N 条，或先聚合到城市对再绘制。拾取也可以只对高流量弧线开启，减少命中歧义。

引用本文

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