一款基于 Leaflet 地图开发的轨迹巡航插件

Xxxxie啊
131 阅读5分钟

Leaflet-TrackPlayer 1.2.2 Uniapp Demo示例

一款基于 Leaflet 地图开发的轨迹巡航插件

初始化轨迹

初始化播放轨迹.gif

播放|暂停|重置轨迹

重置播放暂停轨迹.gif

跳转轨迹进度

跳转轨迹播放.gif

新增并播放轨迹

新增轨迹.gif

创建TrackBackPlayer播放器对象


	//创建trackPlayer插件对象
	let trackPlayer = new TrackPlayer()
	//初始化创建轨迹 返回轨迹进度步进数
	let {progressStep}= this.trackPlayer.init(L.Map map,Array<TimePointType > TimePointData)
创建 TrackPlayer 插件实例对象
new TrackPlayer(Options)
Options 类型 Object
键名称值类型描述说明
speednumber （默认值 1）轨迹角色运动速度
PassLinePassLineConfig （默认值参考下方类型）已经过轨迹路线的配置
TrackLineTrackLineConfig （默认值参考下方类型）总轨迹路线的配置
MarkerIconL.icon 类型轨迹运动角色 ICON
PassLineConfig 类型 Object
键名称值类型描述说明
lineColorstring (默认值 #1afa29)轨迹路线填充颜色
arrowColorstring|null (默认值 #FFFFFF)轨迹路线的箭头颜色
TrackLineConfig 类型 Object
键名称值类型描述说明
lineColorstring (默认值 #fff)轨迹路线填充颜色
arrowColorstring|null (默认值 #000000)轨迹路线的箭头颜色
调用方法示例
	//调用trackPlayer插件方法
	switch (action) {
				case 'init':
    			//初始化trackPlayer 轨迹
				let {progressStep}=trackPlayer.init(L.Map map,Array<TimePointType > TimePointData)

				break;
             	//更新轨迹运动速度
				case 'speed':
				trackPlayer.setSpeed(speed||300)
				break;
				case 'play':
			 	//开始轨迹运动
				trackPlayer.startTrack(progress)
				break;
				case  'pause':
             	//暂停轨迹运行
				trackPlayer.pauseTrack();
				break;
				case 'destroy':
              	//销毁轨迹
				trackPlayer.destroyTrack()
				break;
				//新增轨迹
				case 'addTrack':
				trackPlayer.addTrackData(extraPointData)
				break;

			}
轨迹实例方法
方法名称方法类型描述说明
init(map:L.map,TimePointData:Array)=> InitBackDataType初始化轨迹方法 TimePointData:Array为轨迹路线 JSON 数据
setSpeed(speed:number|null)=> void设置轨迹角色运动速度
addTrackData(TimePointData:Array)=>void添加轨迹数据
startTrack(progress:number|null)=> void运行轨迹 (传入运动轨迹进度，轨迹将自动跳转到指定进度开始运动)
tips：注意传入的轨迹进度必须是插件返回的轨迹步进值得倍数。否则轨迹实际运行的效果将会混乱
reStart()=> void重置轨迹进度
pauseTrack()=> void暂停轨迹运动
destroyTrack()=> void销毁轨迹
tips：销毁轨迹后需要重新 init 生成轨迹。
on(EventType: TrackBackPlayerEvent, cb:Function)=>void监听插件事件。EventType : 插件暴露的事件类型 ，cb: 触发事件的回调函数
off(EventType: TrackBackPlayerEvent, cb:Function)=>void解除指定插件事件。EventType : 插件暴露的事件类型 ，cb: 触发事件的回调函数
TrackBackPlayerEvent 类型 String 。 目前只暴露了 onProgressUpdate 与 onArriveTrackPoint 事件
方法类型方法说明
onProgressUpdate轨迹进度更新触发事件。回调函数 接收 参数类型 TrackInfo 参考下文
onArriveTrackPoint当轨迹进行到其中的一个轨迹坐标点时触发
TrackInfo 类型 Object
键名称值类型描述说明
speednumber轨迹角色运动速度
progressnumber当前轨迹所运行的进度
progressStepnumber根据轨迹数组 JSON 计算出的每个轨迹点的步进值
move_status'stop'|'moving'当前轨迹角色状态
track_status'unStart'|'progress'|'end'当前轨迹状态
MOVE_MARKERL.marker轨迹角色实例
TRACK_PASS_LINEL.polylineDecorator插件 leaflet-polylinedecorator 注入的一个类 ，具体参考插件官网说明
TimePointType 类型 Object 轨迹路线 JSON 数据
键名称值类型描述说明
lngnumber轨迹点经度坐标
latnumber轨迹点纬度坐标
timeDate String轨迹点记录时间 示例（2025/09/19 08:06:20）
InitBackDataType 类型 Object
键名称值类型描述说明
progressStepnumber平均每个轨迹点之间占总进度的步进值
TrackPlayer 实例属性
属性名称属性类型描述说明
_Alive插件是否被激活
_mapleaflet 地图实例
_speed速度: 标识上一个点移动到下一个点的速度为 300ms
_TrackStatus轨迹状态 unStart:未开始 progress:进行中 end:已结束
_Track_Data轨迹数据
_CurTrackData当前行驶的轨迹角色 所处进度的轨迹数据
_PassMarkStatus行驶的轨迹角色对象状态 stop:停止状态 moving:正在移动
_PassMarkerL.marker行驶的轨迹角色对象 L.marker 实例
_TrackLineDecoratorL.polylineDecorator总轨迹路线 L.polylineDecorator 实例
_TrackLineL.Line总轨迹线 L.Line 实例
_PassLineDecoratorL.polylineDecorator已行驶轨迹 L.polylineDecorator 实例
_PassLineL.Line已行驶轨迹线 L.Line 实例
_TrackerLayerGroupL.LeafletGroup行驶轨迹图层
_TrackProgress轨迹总进度
_TrackProgressStep进度步进值
_TrackAnimateTimer轨迹运动动画 timer 对象
_Options插件初始化时可传入的配置项
_duration_unit‘second’|‘minute’|‘hour’|‘none’根据轨迹 JSON 坐标点的相隔距离时间来设置。坐标点的时差越短就设置 second，越长设置 hour。如果想每段坐标点的路径的运行时间都一致则设置 none

Tips：

1.若需要根据时间线跳转指定到轨迹的指定进度 分为三步

step1 找到所需要跳转到的轨迹占总轨迹数据的 Index 下标

step2 拿所需要跳转的指定轨迹下标值 * 插件所返回的轨迹进度步进值 = 所跳转轨迹占总轨迹的进度

step3 调用 startTrack 方法传入所跳转的 轨迹点进度值 。轨迹将自动跳转到指定进度

2.所需更多定制化的操作可以使用插件中的属性 。例如监听轨迹移动角色的点击事件。拿到插件内部的_PassMarker 根据 leaflet 官网的 L.marker 文档设置其监听事件

##下版本更新计划

1.点击回放轨迹路线跳转到指定位置开始进行

2.优化代码结构

avatar
文章
阅读
粉丝