A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。
https://weijun-lab.github.io/Leaflet.TrackPlayer/
npm install leaflet-trackplayer- Or download the repository
import "leaflet-trackplayer";<script src="Leaflet.TrackPlayer/dist/leaflet-trackplayer.umd.cjs"></script>let track = new L.TrackPlayer(latlngs, options).addTo(map)let latlngs = [
[
34.291120985630914,
108.91770583134237
],
[
34.29428596006031,
108.9177058265846
],
];
let track = new L.TrackPlayer(latlngs, {
markerIcon: L.icon({
iconUrl: "Your image url",
}),
markerRotation: false,
}).addTo(map);
track.start();
track.on("progress",(progress, { lng, lat },index)=>{{
console.log(`progress:${progress} - position:${lng},${lat} - trackIndex:${index}`)
})An array of latitude and longitude data for the trajectory, which is the same as the first parameter for L.polyline.
| Options | Type | Default | Description |
|---|---|---|---|
| speed | Number | 600 | Travel speed (km/h) |
| weight | Number | 8 | Width of the trajectory line |
| markerIcon | L.icon | - | The icon of the moving marker during playback has a value equivalent to the 'icon' property of the L.marker. |
| polylineDecoratorOptions | Object | {...} | Arrowhead styles for the trajectory line, seeLeaflet.PolylineDecorator |
| passedLineColor | String | #0000ff | Color of the traveled portion of the trajectory line |
| notPassedLineColor | String | #ff0000 | Color of the untraveled portion of the trajectory line |
| panTo | Boolean | true | Whether the map view follows the moving marke |
| markerRotation | Boolean | true | Whether the marker auto-rotates according to the direction of movement |
| markerRotationOrigin | String | center | The rotation origin of the marker, follows the CSS transform-origin rule |
| markerRotationOffset | Number | 0 | The angle offset for marker rotation |
| Methods | Return | Description |
|---|---|---|
| start() | - | Start playback |
| pause() | - | Pause playback |
setSpeed(<Number> speed,<Number> debounceTimeout?) |
- | Set the playback speed (km/h) |
setProgress(<Number> progress) |
- | Set the playback progress value to 0-1 |
addTo(<Map> map) |
this | Adds the track player to the map |
| remove() | - | Removes the track player from the map |
on(<String> type,<Function> fn) |
- | Adds a listener function to the specified event type |
off(<String> type,<Function> fn？) |
- | Removes the passed-in listener function. If no function is specified, removes all listeners for the event type. |
| Event | Description |
|---|---|
| start | Triggered when playback starts |
| pause | Triggered when playback is paused |
| finished | Triggered when playback completes |
| progress | Triggered during playback; receives the progress(0-1) and current location and track array index in the callback function |
| Properties | Type | Description |
|---|---|---|
| marker | L.marker | Moving marker on the trajectory |
| passedLine | L.polyline | The traveled part of the trajectory line |
| notPassedLine | L.polyline | The untraveled part of the trajectory line |
| polylineDecorator | L.polylineDecorator | The arrowhead-decorated polyline |
| options | Object | Configuration options |
I gratitude to the following open-source plugins, which have provided essential support for the functionality.
- turf A modular geospatial engine written in JavaScript
- Leaflet.PolylineDecorator Defines and draws patterns along existing polylines or coordinate paths
- Leaflet.RotatedMarker Provides rotation functionality for markers in Leaflet
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent