# vue-vehicle-track-drawer Vue 3 车辆轨迹播放组件。

支持抽屉/弹窗两种模式，可自定义轨迹样式和播放速度，基于高德地图和 Element Plus 开发。

特性

• 支持抽屉（drawer）和弹窗（dialog）两种显示模式 -
• 可自定义轨迹线颜色、宽度和车辆图标 -
• 灵活配置播放速度和倍速选项 - 提供轨迹播放、暂停、进度控制功能 -
• 支持轨迹打印功能 - 适配不同屏幕尺寸，
• 响应式布局
• 安装组件 npm install vue-vehicle-track-drawer --save
• 安装依赖（确保已安装） npm install element-plus @element-plus/icons-vue @amap/amap-jsapi-loader vue --save

特性

全局引入

import { createApp } from 'vue';
import App from './App.vue';
import VehicleTrackDrawer from 'vue-vehicle-track-drawer';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.use(VehicleTrackDrawer);
app.mount('#app');

Props 配置

| 参数名 | 类型 | 默认值 | 说明 | | ------------ | ------- | ------------------- | ---------------------------------------------------- | | title | String | ' 用车轨迹' | 组件标题 | | visible | Boolean | false | 控制组件显示 / 隐藏（v-model） | | mode | String | 'drawer' | 显示模式，可选值：'drawer'（抽屉）、'dialog'（弹窗） | | size | String | '70%' | 抽屉模式下的尺寸 | | dialogSize | String | '80%' | 弹窗模式下的尺寸 | | draggable | Boolean | true | 是否支持拖拽 | | modal | Boolean | true | 弹窗模式下是否显示遮罩层 | | mapId | String | 'vehicle-track-map' | 地图容器 ID（避免重复） | | mapKey | String | - | 高德地图开发者 Key（必填） | | showControl | Boolean | true | 是否显示播放控制栏 | | showFooter | Boolean | true | 是否显示底部按钮栏 | | printSize | String | '794px' | 打印模式下的尺寸 | | defaultSpeed | Number | 1 | 默认播放速度 | | speedOptions | Array | 见下方说明 | 倍速选项配置 | | styles | Object | 见下方说明 | 样式配置 | | trackPoints | Array | [] | 轨迹点数据（必填） |

speedOptions 默认值

javascript

[
  { label: '0.5x', value: 0.5 },
  { label: '1x', value: 1 },
  { label: '2x', value: 2 },
  { label: '3x', value: 3 },
  { label: '4x', value: 4 }
]

styles 默认值

javascript

{
  fullTrackColor: '#e5e7eb',  // 完整轨迹颜色
  movingTrackColor: '#4096ff',// 已行驶轨迹颜色
  trackWidth: 6,              // 轨迹线宽度
  carIcon: undefined          // 车辆图标，默认使用高德地图标记
}

trackPoints 数据结构

javascript

[
  {
    lng: Number,         // 经度（必填）
    lat: Number,         // 纬度（必填）
    speedKph?: Number,   // 速度（km/h，可选）
    deviceTime?: String  // 时间（可选）
  },
  // 更多轨迹点...
]

事件

| 事件名 | 说明 | 回调参数 | | --------------- | ------------------ | --------------------- | | close | 组件关闭时触发 | - | | print | 点击打印按钮时触发 | - | | progress-change | 进度变化时触发 | 进度值（Number） | | play-status | 播放状态变化时触发 | 是否播放中（Boolean） |

方法

通过 ref 可以调用组件内部方法：

vue

<template>
  <vehicle-track-drawer ref="trackRef" ... />
</template>

<script setup>
import { ref } from 'vue';

const trackRef = ref(null);

// 示例：手动触发播放
const startPlay = () => {
  trackRef.value.handlePlay();
};
</script>

| 方法名 | 说明 | 参数 | | -------------- | ------------ | ---------------- | | initMap | 初始化地图 | - | | handlePlay | 开始播放轨迹 | - | | handleStop | 停止播放轨迹 | - | | updatePosition | 更新轨迹位置 | 进度值（Number） |

样式定制

组件支持通过深度选择器（:deep ()）覆盖默认样式：

css

/* 自定义控制栏样式 */
:deep(.control-bar) {
  background: rgba(0, 0, 0, 0.7);
}

/* 自定义滑块样式 */
:deep(.el-slider__runway) {
  background-color: #666;
}

注意事项

1. 高德地图 Key 需要自行申请（高德开放平台）
2. 确保轨迹点数据格式正确，至少包含 lng 和 lat 字段
3. 组件依赖 Element Plus，需确保项目中已正确引入
4. 车辆图标建议使用 32x32 像素的 PNG 图片，确保显示效果

版本更新日志

1.0.0

• 初始版本发布，支持抽屉 / 弹窗模式切换、轨迹播放控制、样式自定义等功能

License

zjhs

基础用法