经纬志
首页 / deck.gl / API 文档

PathLayer

先看结论

把一串坐标连成带宽度的折线,用于轨迹、路网、行政边界。

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

核心参数

参数默认说明
data[]每条记录包含一条路径
getPath—返回坐标数组 [[lng, lat], …]
getWidth1线宽,单位由 widthUnits 决定
widthUnits'meters''meters' 或 'pixels'
widthScale1统一倍率
widthMinPixels0像素下限,缩小时线不消失
widthMaxPixels无像素上限,放大时线不糊满屏
jointRoundedfalse拐角圆角连接
capRoundedfalse端点圆头
miterLimit4尖角连接的最大外扩倍数
billboardfalse线始终正对相机,倾斜时宽度不压缩
_pathType'open''open'、'loop'、'closed'
pickablefalse是否参与拾取

示例

var layer = new deck.PathLayer({
  id: 'routes',
  data: routes,
  getPath: function (d) { return d.coords; },
  getWidth: function (d) { return d.level * 2; },
  widthUnits: 'pixels',
  widthMinPixels: 1,
  widthMaxPixels: 12,
  getColor: function (d) { return d.color; },
  jointRounded: true,
  capRounded: true,
  pickable: true
});

宽度单位

以米为单位适合道路、河流这类有真实宽度的对象;缩放时线宽随地面 一起变化,符合比例尺直觉。以像素为单位适合轨迹、连接线, 保证任何层级都清晰可见。

低缩放层级下,米制宽度会细到不足一个像素而完全消失。 widthMinPixels: 1 是必需的兜底, 比把单位改成像素更能保留尺度感。

路径闭合

_pathType 影响端点处理:'loop' 把首尾相连 但不额外补点,适合环线;'closed' 补一段回到起点, 适合多边形边界。两条路径首尾相接时,用 'open' 会在接缝处出现缺口,改用 'closed' 更自然。

性能

顶点总数决定开销,而不是路径条数。一条两万个点的路径, 与一万条各两个点的路径,负载完全不同。轨迹数据常见的优化是 按距离或时间重采样,把相邻的共线点删掉:

顶点数建议
十万以内直接渲染,无需处理
十万到百万抽稀、合并短路径、关闭圆角
百万以上按瓦片切分,或用 TripsLayer 分段加载

圆角连接会为每个拐角额外生成三角形,长路径上代价明显。 静态展示时保持默认的尖角连接,视觉差异很小。

路径不要带重复点。相邻坐标完全相同时,法线方向无法计算, 该段会渲染成尖刺或空白。生成轨迹时过滤掉重复坐标, 或保证相邻点至少相差一个可分辨的距离。

引用本文

经纬志(2026)。《PathLayer》。https://www.jingweizhi.com/deckgl/api/path-layer.html(访问日期 2026-11-03)。