经纬志
首页 / Leaflet / API 文档

Polyline

先看结论

一串首尾相连的线段,轨迹、路径、边界线都用它。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-27 · 引用本文
L.polyline(latlngs, options) → Polyline

顶点数组的形式

latlngs 可以是 LatLng 对象数组,也可以是 [lat, lng] 数组。多段线用二维数组表示,每段独立绘制但共享样式:

var simple = [[39.90, 116.39], [39.92, 116.42], [39.93, 116.45]];

var multi = [
  [[39.90, 116.39], [39.92, 116.42]],
  [[39.93, 116.45], [39.95, 116.48]]
];

构造参数

参数默认说明
color'#3388ff'线色
weight3线宽(像素)
opacity1线透明度
dashArraynull虚线,如 '8 6'
dashOffsetnull虚线起始偏移,配合动画可做流动效果
lineCap'round''butt' / 'round' / 'square'
lineJoin'round'拐角形状
smoothFactor1.0简化强度,越大越省渲染、形状越粗
noClipfalse禁止按视野裁剪,动画线宽时有用但更耗性能
interactivetrue是否响应鼠标,纯背景线可关掉
rendererSVG指定渲染器
pane'overlayPane'渲染 pane
className''附加类名

方法

方法说明
setLatLngs(latlngs)整体替换顶点
getLatLngs()读取顶点,注意多段线返回嵌套数组
addLatLng(latlng, latlngs?)追加顶点,可指定加到哪一段
setStyle(options)修改样式
getBounds()外接矩形
getCenter()外接矩形中心,不是路径中点
toGeoJSON(precision?)导出 LineString / MultiLineString
bringToFront() / bringToBack()调整层级
redraw()重新投影
var line = L.polyline([[39.90, 116.39], [39.92, 116.42]], {
  color: '#c2410c',
  weight: 4,
  dashArray: '10 8',
  smoothFactor: 0.8
}).addTo(map);

line.addLatLng([39.94, 116.46]);
line.bindTooltip('两段路径');

console.log(line.getLatLngs().length);

getCenter() 返回的是包围盒中心。一条弯成 U 形的路径, 这个点可能落在路径之外。需要沿线定位时按累计距离插值,自己算。

平滑与精度

smoothFactor 控制渲染前的顶点简化。值越大,越容易丢掉细小的拐弯。 轨迹回放、精细边界这类场景保持 0.5–1.0;只作示意背景的线可以调到 2 以上降低开销。 简化只影响绘制,getLatLngs() 返回的仍是原始顶点,量算结果不受影响。

跨 180° 经线的坑

从东经 179° 到西经 179° 的线段,数值上跨越 358°,Leaflet 会照直画一条横穿整张地图的长线。 正确做法是在数据侧拆成两段,或者在 180° 附近插入边界点。 真实航线应在投影坐标里处理,而不是直接给经纬度数组。

动态更新

轨迹类场景每帧调用 setLatLngs 会重建整条路径。顶点数量上百时, 改用固定长度的滑动窗口,只保留最近 N 个点,既能画出拖尾,也不会让路径无限增长。

引用本文

经纬志(2026)。《Polyline》。https://www.jingweizhi.com/leaflet/api/polyline.html(访问日期 2026-11-03)。