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

LineLayer

先看结论

把成对的起点终点画成带宽度与颜色的线段。

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

参数

参数默认说明
getSourcePosition—起点 [经度, 纬度]
getTargetPosition—终点
getColor黑整条线一个颜色
getWidth1线宽
widthUnits'pixels'pixels 或 meters
widthMinPixels / widthMaxPixels1 / 无像素宽度上下限
widthScale1米制宽度的额外倍率

示例

new deck.LineLayer({
  id: 'od',
  data: flows,
  getSourcePosition: function (d) { return d.from; },
  getTargetPosition: function (d) { return d.to; },
  getColor: function (d) { return d.v > 500 ? [255, 160, 80] : [90, 180, 255]; },
  getWidth: function (d) { return Math.sqrt(d.v) / 8; },
  widthUnits: 'pixels',
  widthMinPixels: 1,
  pickable: true
});

与 PathLayer 的分工

LineLayer 每条数据只有两个端点，适合 OD 连线、关系图。 PathLayer 接受任意顶点数组，适合道路、河流、轨迹。 把多段线塞进 LineLayer，中间顶点会被忽略。

宽度取值

线宽按线性映射时，高值要素会把低值挤成一条细丝。 取平方根或对数更合适，前提是数值为正；有零值时先加偏移。

米制宽度在低缩放下几乎为零。一定要配 widthMinPixels， 否则缩到全国范围时整层线消失。

引用本文

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