# Leafelt.TrackPlayer
- - -
**language:** [English](README.md) / [简体中文](README.zh-CN.md)
- - -
A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。
- - -
## 🎨Live Demo
## Installation
* `npm install leaflet-trackplayer`
* Or download the repository
## Usage
### ESM(ECMAScript Modules)
```js
import "leaflet-trackplayer";
```
### UMD(Universal Module Definition)
```html
```
---
```js
let track = new L.TrackPlayer(latlngs, options).addTo(map)
```
## Code Example
```js
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}`)
})
```
## Documentation
### Latlngs
An array of latitude and longitude data for the trajectory, which is the same as the first parameter for `L.polyline`.
### Options
| 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, see[Leaflet.PolylineDecorator](https://github.com/bbecquet/Leaflet.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
| Methods | Return | Description |
| --- | --- | --- |
| start() | - | Start playback |
| pause() | - | Pause playback |
| setSpeed(` speed, debounceTimeout?`) | - | Set the playback speed (km/h) |
| setProgress(` progress`) | - | Set the playback progress value to 0-1|
| addTo(`