一个基于Vue 3和Canvas的交互式地图路径绘制工具，支持节点规划、路径连接、最优路径计算和动画展示。该工具提供了直观的三步工作流程，让用户能够轻松创建和管理复杂的路径规划方案。
- 多步骤工作流：预设点位 → 预设路径连接 → 计算最优路径
- 智能节点管理：添加、选择、删除节点，支持节点命名和悬停高亮
- 灵活路径连接：创建节点间的双向连接，自动计算距离作为权重
- 高级路径规划：支持简单路径（起点到终点）和多点路径（途经多个点）
- 路径优化算法：支持途经点顺序优化（旅行商问题近似解）
- 鼠标悬停高亮：节点和路径在鼠标悬停时高亮显示
- 拖拽操作：支持节点拖拽调整位置
- 选择删除：点击选择节点或路径进行删除操作
- 实时预览：路径创建过程中实时显示连接线
- 路径动画播放：流畅的路径动画展示
- 动画控制：支持循环播放、速度调整、暂停/继续
- 样式定制：
- 线条颜色和路径颜色分别设置
- 多种路径样式：虚线、实线、点线
- 多种箭头样式：三角形、箭形、圆形
- 动画速度：1-3倍速可调
- 数据导入导出：支持路径数据的JSON格式导入导出
- 状态保持：工作流状态和配置选项自动保存
- 批量操作：支持批量删除节点和路径
- Node.js 16.0 或更高版本
- npm 或 yarn 包管理器
# 克隆项目
git clone https://github.com/YQisme/map-path-drawer.git
cd map-path-drawer
# 安装依赖
npm install# 启动开发服务器
npm run dev访问 http://localhost:5173 查看应用。
# 构建生产版本
npm run build
# 预览构建结果
npm run preview构建后的文件位于dist目录，可以直接部署到任何静态文件服务器。
- 点击"选择图片文件"按钮
- 选择您的地图图片（支持JPG、PNG、GIF等格式）
- 图片将显示在画布中，作为路径规划的底图
- 添加节点：点击地图上的任意位置添加节点
- 选择节点：点击已有节点可选中（红色高亮显示）
- 删除节点：
- 选中节点后点击"删除选中点"
- 点击"删除最后一个点"删除最近添加的节点
- 点击"清除所有点"清除所有节点
- 节点命名：在节点列表中可以为节点设置自定义名称
- 创建连接：
- 点击一个节点作为起点（会显示临时连接线）
- 点击另一个节点作为终点，完成连接创建
- 连接会自动计算两点间距离作为权重
- 选择路径：点击路径线或路径列表项可选中路径（红色高亮）
- 删除路径：
- 选中路径后点击"删除选中路径"
- 点击"删除最后一条路径"删除最近创建的路径
- 点击"清除所有路径"清除所有路径连接
- 路径管理：所有连接都是双向的，在连接列表中显示为双向箭头
- 选择路径模式：
- 简单路径：选择起点和终点，计算最短路径
- 多点路径：添加多个途经点，支持顺序优化
- 配置路径参数：
- 选择起点和终点节点
- 添加途经点（多点路径模式）
- 启用途经点顺序优化（解决旅行商问题）
- 计算路径：点击"计算最优路径"按钮
- 观看动画：系统将展示路径动画
- 调整动画：
- 调整动画速度（1-3倍速）
- 启用/禁用循环播放
- 设置最大循环次数
- 选择路径样式和箭头样式
- 线条颜色：设置节点间连接线的颜色
- 路径颜色：设置最优路径动画的颜色
- 虚线：适合表示规划中的路径
- 实线：适合表示已确定的路径
- 点线：适合表示参考路径
- 三角形：传统箭头样式
- 箭形：现代箭头样式
- 圆形：简洁的圆形指示器
- 动画速度：1倍（慢速）到3倍（快速）
- 循环播放：启用后动画会循环播放
- 最大循环次数：0表示无限循环
- 隐藏中间节点：仅显示路径，隐藏中间节点标记
- Vue 3：使用Composition API构建响应式界面
- TypeScript：提供类型安全和更好的开发体验
- HTML5 Canvas：高性能的2D图形渲染
- Vite：快速的构建工具和开发服务器
- Dijkstra算法：计算两点间最短路径
- 贪心算法：近似解决旅行商问题（TSP）
- 点到线段距离计算：精确的几何计算
- 动画插值：流畅的路径动画效果
src/
├── components/
│ └── MapPathDrawer.vue # 核心地图绘制组件
├── views/
│ └── MapView.vue # 主视图组件
├── router/
│ └── index.ts # 路由配置
├── stores/
│ └── counter.ts # 状态管理
└── assets/
└── main.css # 全局样式
- 导出数据：将当前路径规划导出为JSON格式
- 导入数据：从JSON文件恢复路径规划
- 数据格式：包含节点、连接、样式等完整信息
- Canvas渲染：使用HTML5 Canvas进行高性能图形渲染
- 事件优化：防抖处理鼠标事件，提升交互流畅度
- 内存管理：及时清理动画帧和事件监听器
- 自适应布局：支持不同屏幕尺寸
- 触摸支持：兼容移动设备触摸操作
- 键盘导航：支持键盘快捷键操作
| 浏览器 | 版本要求 | 支持状态 |
|---|---|---|
| Chrome | 88+ | ✅ 完全支持 |
| Firefox | 85+ | ✅ 完全支持 |
| Safari | 14+ | ✅ 完全支持 |
| Edge | 88+ | ✅ 完全支持 |
| IE | 不支持 | ❌ 不支持 |
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 运行类型检查
npm run type-check
# 运行代码检查
npm run lint# 构建生产版本
npm run build
# 预览构建结果
npm run preview
# 部署到静态服务器
# 将 dist/ 目录内容上传到您的Web服务器项目使用Vite作为构建工具，可以通过修改 vite.config.ts 文件来自定义构建配置。
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开 Pull Request
- Vue.js 团队提供的优秀框架
- Canvas API 提供的高性能图形渲染
- 开源社区的各种算法实现
如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件
- 参与讨论
注意：本项目仅供学习和研究使用，请勿用于商业用途。