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