【生活娱乐赛道】自定义跑步路线生成器
标签： 生活娱乐
0. 先和大家打个招呼吧 
你是谁：
一名技术爱好者，平时喜欢跑步，也喜欢折腾各种有意思的小工具。
你是怎么用 TRAE 把 Demo 做出来的：
说实话这个项目最开始只是一个模糊的想法——"能不能让用户随手画个形状，自动吸附到道路上，生成可以直接跑的创意路线？"我自己会写代码，但如果从零开始搭项目、调Leaflet地图、写状态管理、处理OSRM接口各种坑，估计得折腾好几天。
用TRAE的体验真的很惊喜：我只需要把需求用自然语言描述清楚，比如"我要一个地图，支持自由画路线"、“右键删除点、点击线段插入点”、“吸附后点太多了，帮我简化一下”，它就能直接把代码写出来。
印象最深的是解决"吸附后产生大量无效之字形路线"那个bug，我只说了现象，TRAE就自己分析出是自由绘制点太密导致OSRM匹配错误，主动提出了三层防护方案——绘制结束简化、吸附前预简化、match API采样优化，还加了Ramer-Douglas-Peucker算法，比我自己想的还周全。全程我没写几行代码，都是在描述需求、验收效果、提出优化方向，这种"你说它做"的配合方式真的太高效了。
1. Demo 简介
是什么： 纯前端网页应用，无需后端、无需注册登录，打开浏览器即可使用。
面向谁：
- 跑步/骑行爱好者，想要跑出有趣图案轨迹的人
- 运动博主/KOL，需要创作创意路线打卡内容
- 城市探索者，规划个性化的运动路线
主要功能：
-
三种路线绘制模式
自由绘制：像画笔一样在地图上随手画，鼠标拖动即时生成路线
点击打点：精准点击逐点标记路线起点、转弯点、终点
形状生成：一键生成爱心、星星、圆形、三角形、方形五种创意形状，拖到哪里形状就出现在哪里
-
一键吸附到真实道路
- 手绘/形状路线点击"吸附道路"，自动对齐到OpenStreetMap真实道路网
- 智能RDP路线简化算法，不会产生锯齿无效路线
- 形状路线优先使用地图匹配API，保持形状轮廓不大变样
- 多OSRM端点自动容灾，一个服务挂了自动切下一个
-
完整运动数据生成
- 自动计算距离、预计时长、平均配速
- 海拔数据：支持真实API获取或模拟生成
- 运动指标：配速分段、心率区间、步频、卡路里消耗
- 支持导出路线数据
2. Demo 创作思路
灵感来源：
之前在小红书/抖音上经常看到有人跑出"520爱心路线"、“生日数字路线”、“动物图案路线"觉得很有意思，但自己规划起来非常麻烦——要对着地图一点点找路，调整半天还经常走不通，最后画出来的形状歪歪扭扭。现有的跑步App（Keep、Strava、悦跑圈等）的路线规划功能都非常基础，只能沿着已有道路走，不能"先想形状再匹配道路”。
想解决的问题：
- 普通用户想画创意路线门槛太高，要对着地图一点点挪，10分钟都画不出一个爱心
- 手绘路线脱离实际道路，跑起来根本没法照着走，容易走到建筑/河里
- 画完路线没法直观看到距离、配速、消耗这些运动数据
- 大多数工具都要下载App、注册登录，太麻烦
为什么做这个方向：
- 创意运动路线是社交平台上很受欢迎的内容形式，但工具链非常不成熟
- 纯前端实现可以做到即开即用，不需要部署复杂后端，用户零门槛
- OSRM开源路由服务+公共瓦片地图完全够用，不需要商业API配额
- 这个方向用TRAE开发效率极高，我只需要描述清楚交互逻辑就行
3. Demo 体验地址
本地运行方式：
npm install
npm run dev
构建生产版本：
npm run build
zip：
自定义跑步路线生成器.zip (551.1 KB)
4. TRAE 实践过程
整个项目从0到1完全由TRAE Solo Agent开发完成，我只负责需求描述、功能验收和提出优化方向。
开发关键步骤：
第一步：项目初始化与基础架构
- 使用TRAE创建React+TypeScript+Vite项目，集成Tailwind CSS
- 集成Leaflet地图库，实现基础地图显示、缩放、平移
- 搭建Zustand状态管理，定义路线点、绘制模式、设置等数据结构
第二步：核心绘制功能开发
- 实现自由绘制模式：鼠标拖动时按距离间隔记录点位
- 实现点击打点模式：单次点击添加点
- 实现形状生成：爱心、星星、圆形、三角形、方形五种预设形状的坐标生成算法
- 实现形状拖动预览：移动鼠标时形状实时跟随
第三步：道路吸附功能（核心难点）
- 接入OSRM公开路由服务，实现route API路径规划
- 问题发现：吸附后产生大量冗余点、之字形无效路线
- TRAE帮我优化：实现Ramer-Douglas-Peucker路线简化算法，吸附前预简化、吸附后再简化
- 形状路线优化：改用match API地图匹配替代route API重新规划，保持形状轮廓
- 自由绘制点过密问题：三层防护策略——绘制结束简化、吸附前预简化、match API采样优化+30米匹配半径
- 多端点自动容灾：配置多个OSRM服务，失败自动降级重试
第四步：编辑模式交互
- 实现拖拽调整：拖动路线上的控制点实时修改路线
- 实现插入点：点击线段中间自动插入新点
- 实现删除点：右键点击控制点删除该点
- 优化距离检测：精确找到最近的点/线段
第五步：运动数据生成
- 距离计算：Haversine公式逐点累加
- 海拔获取：支持Open-Elevation API和模拟生成
- 运动指标：计算配速分段、心率区间、步频、卡路里消耗
- 实时统计面板：绘制过程中实时更新所有数据
第六步：UI/UX现代化升级
- 玻璃态(glassmorphism)设计风格，深色主题
- 渐变按钮、平滑动画、微交互效果
- 新手引导弹窗：5步引导介绍所有核心功能
- 编辑模式上下文提示：切换到编辑模式自动显示操作说明
- 优化滑块控件：双通道输入，滑块粗调+数值框精确输入+/-微调
- 所有按钮添加详细tooltip，悬停显示功能说明
- 响应式布局，适配不同屏幕尺寸
（此处插入开发关键步骤截图：1. TRAE对话界面截图 2. 代码编辑界面 3. 终端构建成功截图，不少于3张）
关键任务Session ID：
467731499724042:8cf090220ee66f4d4d867630f67ff210_6a43b2f6d3792c194a50b24e.6a43b2f7f673684379231529.6a43b2f6d3792c194a50b24f:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/30 20:31:23)
467731499724042:387cb4b26c8d422a2fb05ef760edd1bb_6a43b2f6d3792c194a50b24e.6a43b979f673684379231639.6a43b9797e9b46de736358ba:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/30 20:52:53)
467731499724042:fbd9b0b54232926206f650f5aabda1f9_6a43b2f6d3792c194a50b24e.6a43bf02f6736843792316e5.6a43bf029cf60faa19a38501:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/6/30 21:10:17)
467731499724042:5d1c89adb5f918fddb6eee2b33664c8e_6a43b2f6d3792c194a50b24e.6a49f4f13bc3a7b4ab693cd3.6a49f4f1e88f1c6adcf0526f:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 14:08:49)
467731499724042:8d83b24e51768c49501f890bbe974a8a_6a43b2f6d3792c194a50b24e.6a49ff813bc3a7b4ab693fda.6a49ff814bd6d87c77a70148:TRAE Work CN.0.1.29.no_sid.no_ppe.T(2026/7/5 14:53:53)
