首页 / deck.gl / API 文档

GreatCircleLayer

先看结论

大圆航线图层。两点之间按球面最短路径插值，长距离航线不会像在墨卡托平面上那样被画成一条穿过高纬的「假直线」。

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

new deck.GreatCircleLayer(props)

核心参数

参数	默认	说明
`data`	—	航线数据数组
`getSourcePosition`	必填	起点，`[lng, lat]` 或 `[lng, lat, z]`
`getTargetPosition`	必填	终点，格式与起点一致
`getSourceColor`	[0, 0, 0, 255]	起点端颜色
`getTargetColor`	[0, 0, 0, 255]	终点端颜色，沿路径渐变
`getWidth`	1	线宽，单位由 `widthUnits` 决定
`widthUnits`	'pixels'	`'pixels'` 或 `'meters'`
`widthMinPixels` / `widthMaxPixels`	0 / 无	像素宽度上下限
`opacity` / `pickable`	1 / false	透明度与拾取

示例

var routes = new deck.GreatCircleLayer({
  id: 'air-routes',
  data: flights,
  getSourcePosition: function (d) { return [d.fromLng, d.fromLat]; },
  getTargetPosition: function (d) { return [d.toLng, d.toLat]; },
  getSourceColor: [46, 118, 214, 200],
  getTargetColor: [232, 120, 62, 200],
  getWidth: function (d) { return Math.max(1, d.passengers / 900); },
  widthUnits: 'pixels',
  widthMinPixels: 1,
  pickable: true
});

与 ArcLayer 的区别

ArcLayer 在投影平面上连接两点，还会按 getHeight 把弧线抬起，适合城市内部的短距离连线与流向图。 GreatCircleLayer 在球面上插值，路径自然弯曲，适合跨洲航线、海底光缆这类长距离要素。

与 PathLayer 的区别

PathLayer 按给定的顶点数组逐段绘制，路径完全由数据决定； GreatCircleLayer 只给两个端点，中间的点由图层计算。数据里已经有精确航迹时用 PathLayer，只有起终点时用这一层。

v9 的不可变更新

deck.gl 9 的图层不可变。切换数据集或颜色映射需要 clone 出新的图层实例，再由 deckgl.setProps 替换 layers 数组：

var next = routes.clone({
  data: flights2026,
  getWidth: 2
});

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

反经线不会自动断开。起点在 170°E、终点在 170°W 的航线，短路径要跨过 180° 经线。若数据里的经度写法相反，图层会沿长路径绕地球一圈，表现为一条横贯整幅地图的长线。入库前统一经度区间即可避免。

引用本文

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