首页 / deck.gl / API 文档

PathStyleExtension

先看结论

路径样式扩展。给 PathLayer 这类线图层加上虚线、沿路径的偏移，不额外引入一套线图层。

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

new deck.PathStyleExtension({ dash, offset })

构造参数

参数	默认	说明
`dash`	false	开启虚线支持，开启后才能使用 `getDashArray`
`offset`	false	开启沿线偏移，开启后才能使用 `getOffset`
`highPrecisionDash`	false	用更高的精度计算虚线长度，减少长线上的抖动

扩展引入的图层属性

属性	默认	说明
`getDashArray`	[0, 0]	实线段与空白段的长度，`[0, 0]` 表示实线
`dashJustified`	false	true 时按整条路径长度均分虚线，两端对齐，适合闭合环线
`getOffset`	0	沿线法向偏移量，正负控制左右两侧

示例

var boundary = new deck.PathLayer({
  id: 'admin-boundary',
  data: boundaries,
  getPath: function (d) { return d.coordinates; },
  getWidth: 3,
  widthUnits: 'pixels',
  getColor: [64, 96, 140, 220],
  getDashArray: [8, 5],
  dashJustified: true,
  extensions: [new deck.PathStyleExtension({ dash: true })]
});

// 沿道路中心线画两条偏移线，得到双向车道的效果
var lanes = new deck.PathLayer({
  id: 'lane-markers',
  data: roads,
  getPath: function (d) { return d.coordinates; },
  getWidth: 1.5,
  widthUnits: 'pixels',
  getColor: [230, 230, 230, 200],
  getOffset: function (d) { return d.offset; },
  extensions: [new deck.PathStyleExtension({ offset: true })]
});

dash 数组的单位

两个值分别是实线段与空白段的长度，单位跟随图层的宽度单位： widthUnits: 'pixels' 时即为像素，用米制宽度时则为米。同一组参数在两种单位下视觉差异很大，切换单位后需要重新调比例。

与 GeoJsonLayer 配合

GeoJsonLayer 内部的线子图层同样支持该扩展，传在复合图层上即可作用于所有线要素：

new deck.GeoJsonLayer({
  id: 'planned-roads',
  data: planned,
  getLineColor: [214, 96, 96, 220],
  getLineWidth: 2,
  lineWidthUnits: 'pixels',
  getDashArray: [6, 4],
  extensions: [new deck.PathStyleExtension({ dash: true })]
});

v9 的不可变更新

deck.gl 9 的图层不可变，扩展配置也属于图层参数。改虚线间距必须 clone 出新图层，再交给 deckgl.setProps：

var next = boundary.clone({
  getDashArray: [12, 6]
});

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

虚线会增加片元计算量。每段线都要按行进距离插值判断明暗，长距离路径在低端设备上更明显。只在规划线、边界这类少量要素上使用，背景路网保持实线。

引用本文

经纬志（2026）。《PathStyleExtension》。https://www.jingweizhi.com/deckgl/api/path-style-extension.html（访问日期 2026-11-03）。