Skip to content

Latest commit

 

History

History
96 lines (94 loc) · 4.43 KB

README.zh-CN.md

File metadata and controls

96 lines (94 loc) · 4.43 KB
Raw

Leaflet.TrackPlayer

语言: English / 简体中文

一个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 配置选项

🎉致谢与引用

我对以下开源插件深表感谢，它们为本插件的功能提供了关键支持。