PathLayer
把一串坐标连成带宽度的折线,用于轨迹、路网、行政边界。
核心参数
| 参数 | 默认 | 说明 |
|---|---|---|
data | [] | 每条记录包含一条路径 |
getPath | — | 返回坐标数组 [[lng, lat], …] |
getWidth | 1 | 线宽,单位由 widthUnits 决定 |
widthUnits | 'meters' | 'meters' 或 'pixels' |
widthScale | 1 | 统一倍率 |
widthMinPixels | 0 | 像素下限,缩小时线不消失 |
widthMaxPixels | 无 | 像素上限,放大时线不糊满屏 |
jointRounded | false | 拐角圆角连接 |
capRounded | false | 端点圆头 |
miterLimit | 4 | 尖角连接的最大外扩倍数 |
billboard | false | 线始终正对相机,倾斜时宽度不压缩 |
_pathType | 'open' | 'open'、'loop'、'closed' |
pickable | false | 是否参与拾取 |
示例
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)。