Polyline
Quick answer
L.polyline connects a sequence of coordinates into a line and accepts nested arrays for multi-part paths sharing one style. Trajectories, routes, boundaries and connectors all use it, and vertices can be replaced or appended at runtime. Style options include color, weight, dashArray, lineCap and lineJoin.
L.polyline( latlngs , options ) → Polyline
Key points
- smoothFactor simplifies vertices before drawing while getLatLngs still returns originals.
- addLatLng appends a vertex and can target a specific segment of a multi-part line.
- getCenter returns the bounding box center, which may lie off a curved path.
Example
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]]
];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);Notes
- Segments spanning the antimeridian are drawn straight across the world unless split.
- Calling setLatLngs every frame rebuilds the whole path; use a sliding vertex window instead.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Polyline. https://www.jingweizhi.com/en/leaflet/api/polyline.html (accessed 2026-11-03).