Leaflet.TrackPlayer

语言: English / 简体中文
- - -
A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。
- - -

🎨实时演示

安装方法

- 使用npm安装：npm install leaflet-trackplayer
- 或者直接下载仓库

使用方式

$3

``javascript
import "leaflet-trackplayer";
`

$3

`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})
})
`

文档说明

$3

用于轨迹的经纬度数据数组，与L.polyline的第一个参数相同。

$3

| 选项 | 类型 | 默认值 | 描述 |
| --- | --- | --- | --- |
| speed | Number | 600 | 行驶速度（公里/小时） |
| weight | Number | 8 | 轨迹线宽度 |
| markerIcon | L.icon | - | 回放过程中移动标记的图标，相当于L.marker的'icon'属性 |
| polylineDecoratorOptions | Object | {...} | 轨迹线箭头样式，参见Leaflet.PolylineDecorator |
| passedLineColor | String | #0000ff | 已行驶轨迹部分的颜色 |
| notPassedLineColor | String | #ff0000 | 未行驶轨迹部分的颜色 |
| panTo | Boolean | true | 地图视图是否跟随移动标记 |
| markerRotation | Boolean | true | 标记是否根据移动方向自动旋转 |
| markerRotationOrigin | String | center | 标记旋转的原点，遵循CSS transform-origin规则 |
| markerRotationOffset | Number | 0 | 标记旋转的角度偏移量 |

$3

| 方法 | 返回值 | 描述 |
| --- | --- | --- |
| start() | - | 开始播放 |
| pause() | - | 暂停播放 |
| setSpeed( speed, debounceTimeout?) | - | 设置回放速度（公里/小时） |
| setProgress( progress) | - | 设置回放进度值至0-1之间 |
| addTo(