# Leaflet.TrackPlayer
**语言:** [English](README.md) / [简体中文](README.zh-CN.md)
- - -
A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。
- - -
[](https://github.com/weijun-lab/Leaflet.TrackPlayer/blob/master/examples/lib/assets/demo.gif?raw=true)
## 🎨实时演示
## 安装方法
- 使用npm安装：`npm install leaflet-trackplayer`
- 或者直接下载仓库
## 使用方式
### ESM(ECMAScript Modules)
```javascript
import "leaflet-trackplayer";
```
### UMD(Universal Module Definition)
```html
```
---
```javascript
let track = new L.TrackPlayer(latlngs, options).addTo(map);
```
## 代码示例
```javascript
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}`)
})
```
## 文档说明
### Latlngs
用于轨迹的经纬度数据数组，与`L.polyline`的第一个参数相同。
### 配置项
| 选项 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| **speed** | Number | 600 | 行驶速度（公里/小时） |
| **weight** | Number | 8 | 轨迹线宽度 |
| **markerIcon** | L.icon | - | 回放过程中移动标记的图标，相当于`L.marker`的'icon'属性 |
| **polylineDecoratorOptions** | Object | {...} | 轨迹线箭头样式，参见[Leaflet.PolylineDecorator](https://github.com/bbecquet/Leaflet.PolylineDecorator) |
| **passedLineColor** | String | #0000ff | 已行驶轨迹部分的颜色 |
| **notPassedLineColor** | String | #ff0000 | 未行驶轨迹部分的颜色 |
| **panTo** | Boolean | true | 地图视图是否跟随移动标记 |
| **markerRotation** | Boolean | true | 标记是否根据移动方向自动旋转 |
| **markerRotationOrigin** | String | center | 标记旋转的原点，遵循CSS `transform-origin`规则 |
| **markerRotationOffset** | Number | 0 | 标记旋转的角度偏移量 |
### 方法
| 方法 | 返回值 | 描述 |
| --- | --- | --- |
| start() | - | 开始播放 |
| pause() | - | 暂停播放 |
| setSpeed(` speed`, ` debounceTimeout?`) | - | 设置回放速度（公里/小时） |
| setProgress(` progress`) | - | 设置回放进度值至0-1之间 |
| addTo(`