# 前言 我发现他这个轨迹插件很离谱，是不允许更新配置的，并且轨迹内容也会被复用。 我想在一个页面，不断新建轨迹来播放，所以魔改了部分参数。 如需要，直接赋值粘贴即可。 --- ## 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 {}; ``` Loading... # 前言 我发现他这个轨迹插件很离谱，是不允许更新配置的，并且轨迹内容也会被复用。 我想在一个页面，不断新建轨迹来播放，所以魔改了部分参数。 如需要，直接赋值粘贴即可。 --- ## 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 {}; ``` 最后修改：2025 年 07 月 07 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 1 如果觉得我的文章对你有用，请随意赞赏
