leaflet-trackplayer-xiaoai
Version:
一个 Leaflet 轨迹播放插件,可以根据实际行进方向自动旋转标记图标,动态调整已行进和未行进路径的颜色以清晰显示当前进度。支持自定义行驶速度等功能,并提供完整的 TypeScript 类型定义。
123 lines (109 loc) • 3.7 kB
TypeScript
import * as L from "leaflet";
declare global {
namespace L {
interface TrackPlayerOptions {
/** 播放速度,单位:km/h,默认 600 */
speed?: number;
/** 轨迹线宽度,默认 8 */
weight?: number;
/** 自定义标记图标 */
markerIcon?: L.Icon;
/** 折线装饰器选项 */
polylineDecoratorOptions?: any;
/** 已经过路径颜色,默认 "#0000ff" */
passedLineColor?: string;
/** 未经过路径颜色,默认 "#ff0000" */
notPassedLineColor?: string;
/** 是否自动平移到当前位置,默认 true */
panTo?: boolean;
/** 标记旋转原点,默认 "center" */
markerRotationOrigin?: string;
/** 标记旋转偏移角度,默认 0 */
markerRotationOffset?: number;
/** 是否启用标记旋转,默认 true */
markerRotation?: boolean;
/** 初始进度,默认 0 */
progress?: number;
}
class TrackPlayer {
/** 轨迹数据 */
track: any;
/** 距离切片数组 */
distanceSlice: number[];
/** 总距离 */
distance: number;
/** 是否已添加到地图 */
addedToMap: boolean;
/** 配置选项 */
options: TrackPlayerOptions;
/** 初始进度 */
initProgress: number;
/** 是否暂停 */
isPaused: boolean;
/** 已行走距离 */
walkedDistance: number;
/** 临时已行走距离 */
walkedDistanceTemp: number;
/**
* 创建轨迹播放器实例
* @param track 轨迹数据,支持多种格式
* @param options 配置选项
*/
constructor(
track: L.LatLngExpression[] | L.LatLngExpression[][],
options?: TrackPlayerOptions
);
/**
* 添加到地图
* @param map Leaflet 地图实例
*/
addTo(map: L.Map): this;
/**
* 从地图中移除
*/
remove(): void;
/**
* 开始播放
*/
start(): void;
/**
* 暂停播放
*/
pause(): void;
/**
* 恢复播放
*/
startAction(): void;
playAction(): void;
setSpeedAction(speed: number): void;
setSpeed(speed: number, wait?: number): Promise<void>;
/**
* 设置进度
* @param progress 进度值 (0-1)
*/
setProgress(progress: number): void;
/**
* 事件监听器
* @param type 事件类型 start | pause | finished | progress
* @param fn 事件处理函数
*/
on(
type: "start" | "pause" | "finished" | "progress",
fn: (
progress: TrackPlayerOptions["progress"],
latlng: L.LatLng,
index: number
) => void
): this;
/**
* 事件移除监听器
* @param type 事件类型
* @param fn 事件处理函数
*/
off(
type: "start" | "pause" | "finished" | "progress",
fn: (...args: any[]) => void
): this;
}
}
}