前言

我发现他这个轨迹插件很离谱，是不允许更新配置的，并且轨迹内容也会被复用。

我想在一个页面，不断新建轨迹来播放，所以魔改了部分参数。

如需要，直接赋值粘贴即可。

useTrackAnimation.js

import { ref, watch, onUnmounted } from 'vue';
import { proxyValue } from '../utils';

const statusMap = {
    1: 'PLAYING',
    2: 'INITIAL',
    3: 'STOPPING'
};
/**
 * 轨迹动画
 * @param {any} map 地图组件实例引用
 * @param {UseTrackAnimationOptions} options 轨迹动画配置
 * @returns { setPath, start, stop}
 */
function useTrackAnimation(map, options) {
    let instance;
    let pl;
    let mapComponentInstance;
    let mapInstance;
    const status = ref('INITIAL');
    const _options = options || {};
    let prevStartTimeStamp = undefined;
    watch(() => map.value, (n) => {
        mapComponentInstance = n;
    });
    const init = () => {
        if (!instance) {
            mapInstance = mapComponentInstance.getMapInstance();
            instance = new BMapGLLib.TrackAnimation(mapInstance, pl, _options);
            proxyValue(instance, '_status', instance._status, syncState);
        }
    };
    const setPath = (path) => {
        const point = path.map((pathItem) => new BMapGL.Point(pathItem.lng, pathItem.lat));
        pl = new BMapGL.Polyline(point);
        if (instance) {
            instance.cancel();      // 先取消之前动画
            mapInstance.removeOverlay(pl);  // 如果之前有旧pl，先清除（可根据你代码调整）
            instance = null;
        }
        init();
    };
    const start = () => {
        const now = performance.now();
        const _prevStartTimeStamp = prevStartTimeStamp || 0;
        const _delay = _options.delay || 0;
        if (instance && now - _prevStartTimeStamp > _delay && status.value === 'INITIAL') {
            instance.start();
        }
        prevStartTimeStamp = performance.now();
    };
    const cancel = () => {
        if (instance) {
            instance.cancel();
        }
    };
    const stop = () => {
        if (instance) {
            instance.pause();
        }
    };
    const proceed = () => {
        if (instance) {
            instance.continue();
        }
    };
    const syncState = () => {
        if (instance) {
            status.value = statusMap[instance._status];
        }
    };

    // 调用该函数动态修改参数
    const updateOptions=(newOptions)=> {
        Object.assign(_options, newOptions)
    }
    onUnmounted(() => {
        if (instance && status.value !== 'INITIAL') {
            instance.cancel();
        }
        // 手动回收内存
        if (mapInstance) {
            mapInstance.removeOverlay(pl);
            pl = null;
        }
    });
    return {
        /**
         * 设置路径动画路径
         */
        setPath,
        /**
         * 开始动画
         */
        start,
        /**
         * 暂停动画
         */
        stop,
        /**
         * 取消动画
         */
        cancel,
        /**
         * 继续播放动画
         */
        proceed,
        /**
         * 动画状态
         */
        status,
        updateOptions
    };
}

export { useTrackAnimation };

useTrackAnimation.d.ts

import { type Point } from '../utils';
export declare type UseTrackAnimationOptions = {
    /**
     * 动画持续时常，单位ms
     * @default 10000
     */
    duration?: number;
    /**
     * 动画开始延迟
     * @default 0
     */
    delay?: number;
    /**
     * 是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
     * @default true
     */
    overallView?: boolean;
    /**
     * 设置动画中的地图倾斜角度，默认55度
     * @default 55
     */
    tilt?: number;
    /**
     * 设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别
     * @default auto
     */
    zoom?: number;
};
declare type AnimationStatus = 'PLAYING' | 'STOPPING' | 'INITIAL';
/**
 * 轨迹动画
 * @param {any} map 地图组件实例引用
 * @param {UseTrackAnimationOptions} options 轨迹动画配置
 * @returns { setPath, start, stop}
 */
export declare function useTrackAnimation(map: any, options?: UseTrackAnimationOptions): {
    /**
     * 设置路径动画路径
     */
    setPath: (path: Point[]) => void;
    /**
     * 开始动画
     */
    start: () => void;
    /**
     * 暂停动画
     */
    stop: () => void;
    /**
     * 取消动画
     */
    cancel: () => void;
    /**
     * 继续播放动画
     */
    proceed: () => void;
    /**
     * 动画状态
     */
    status: import("vue").Ref<AnimationStatus>;
    updateOptions: (options: UseTrackAnimationOptions) => void;
};
export {};