首页 / Leaflet / API 文档
Polyline
先看结论
一串首尾相连的线段,轨迹、路径、边界线都用它。
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' | 线色 |
weight | 3 | 线宽(像素) |
opacity | 1 | 线透明度 |
dashArray | null | 虚线,如 '8 6' |
dashOffset | null | 虚线起始偏移,配合动画可做流动效果 |
lineCap | 'round' | 'butt' / 'round' / 'square' |
lineJoin | 'round' | 拐角形状 |
smoothFactor | 1.0 | 简化强度,越大越省渲染、形状越粗 |
noClip | false | 禁止按视野裁剪,动画线宽时有用但更耗性能 |
interactive | true | 是否响应鼠标,纯背景线可关掉 |
renderer | SVG | 指定渲染器 |
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)。