Skip to content

README.md

Latest commit

 

History

History
272 lines (194 loc) · 7.55 KB

README.md

File metadata and controls

272 lines (194 loc) · 7.55 KB
Raw

地图路径绘制工具

一个基于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目录，可以直接部署到任何静态文件服务器。

📖 详细使用指南

第一步：上传地图图片

  1. 点击"选择图片文件"按钮
  2. 选择您的地图图片（支持JPG、PNG、GIF等格式）
  3. 图片将显示在画布中，作为路径规划的底图

第二步：预设点位（步骤1）

  1. 添加节点：点击地图上的任意位置添加节点
  2. 选择节点：点击已有节点可选中（红色高亮显示）
  3. 删除节点：
    • 选中节点后点击"删除选中点"
    • 点击"删除最后一个点"删除最近添加的节点
    • 点击"清除所有点"清除所有节点
  4. 节点命名：在节点列表中可以为节点设置自定义名称

第三步：预设路径连接（步骤2）

  1. 创建连接：
    • 点击一个节点作为起点（会显示临时连接线）
    • 点击另一个节点作为终点，完成连接创建
    • 连接会自动计算两点间距离作为权重
  2. 选择路径：点击路径线或路径列表项可选中路径（红色高亮）
  3. 删除路径：
    • 选中路径后点击"删除选中路径"
    • 点击"删除最后一条路径"删除最近创建的路径
    • 点击"清除所有路径"清除所有路径连接
  4. 路径管理：所有连接都是双向的，在连接列表中显示为双向箭头

第四步：计算最优路径（步骤3）

  1. 选择路径模式：
    • 简单路径：选择起点和终点，计算最短路径
    • 多点路径：添加多个途经点，支持顺序优化
  2. 配置路径参数：
    • 选择起点和终点节点
    • 添加途经点（多点路径模式）
    • 启用途经点顺序优化（解决旅行商问题）
  3. 计算路径：点击"计算最优路径"按钮
  4. 观看动画：系统将展示路径动画
  5. 调整动画：
    • 调整动画速度（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 文件来自定义构建配置。

🤝 贡献指南

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开 Pull Request

🙏 致谢

  • Vue.js 团队提供的优秀框架
  • Canvas API 提供的高性能图形渲染
  • 开源社区的各种算法实现

📞 联系方式

如有问题或建议，请通过以下方式联系：

  • 提交 Issue
  • 发送邮件
  • 参与讨论

注意：本项目仅供学习和研究使用，请勿用于商业用途。