Leaflet-trackplayer NPM

Leaflet.TrackPlayer

A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。

🎨实时演示

https://weijun-lab.github.io/Leaflet.TrackPlayer/

安装方法

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

使用方式

ESM(ECMAScript Modules)

import "leaflet-trackplayer";

UMD(Universal Module Definition)

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

文档说明

Latlngs

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

配置项

选项	类型	默认值	描述
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	标记旋转的角度偏移量

方法

方法	返回值	描述
start()	-	开始播放
pause()	-	暂停播放
setSpeed(`<Number> speed`, `<Number> debounceTimeout?`)	-	设置回放速度（公里/小时）
setProgress(`<Number> progress`)	-	设置回放进度值至0-1之间
addTo(`<Map> map`)	this	将轨迹播放器添加到地图上
remove()	-	从地图上移除轨迹播放器
on(`<String> type`, `<Function> fn`)	-	向指定事件类型添加监听函数
off(`<String> type`, `<Function> fn?`)	-	移除传入的监听函数。如果不指定函数，则移除该事件类型的所有监听器

事件

事件	描述
start	当播放开始时触发
pause	当播放暂停时触发
finished	当播放完成时触发
progress	在播放过程中触发；回调函数接收 `progress(0-1)`、`当前位置` 和 `轨迹数组索引`

属性

属性	类型	描述
marker	L.marker	轨迹上的移动标记
passedLine	L.polyline	已行驶轨迹线段
notPassedLine	L.polyline	未行驶轨迹线段
polylineDecorator	L.polylineDecorator	带箭头装饰的轨迹线段
options	Object	配置选项