地图动态轨迹动画与视频生成SaaS平台-AniRoute

1、立项背景和目标：
随着短视频平台（如小红书、TikTok、YouTube）旅行Vlog与户外骑行内容的爆发式增长，博主对高品质、生动的旅行轨迹展示动画需求日益迫切。传统基于After Effects等专业软件制作门槛高、耗时长。AniRoute致力于打造一款零门槛、开箱即用的Web端地图轨迹动画生成SaaS工具，帮助创作者一键生成电影级航线运镜与旅行路线动画视频。

2、核心功能模块：
（1）多源地图交互与地点检索：集成Mapbox数据源，支持多途经点（Waypoints）精准检索、拖拽排序与实时地理编码；
（2）三维运镜轨迹动画引擎：基于GSAP与WebGL实现平滑曲线插值，支持飞机、汽车、轮船等多种交通载具图标，自定义路线宽度、配色、阴影及3D俯仰视角动画；
（3）客户端离线视频渲染导出：采用Canvas Stream与MediaRecorder硬件加速编码技术，支持1080P/4K多分辨率及16:9横屏、9:16竖屏动画视频导出；
（4）用户中心与云端路线同步：提供OAuth快捷鉴权，支持个人行程方案的云端保存、编辑与历史管理；
（5）会员订阅商业化闭环：集成国际支付通道，支持7天免费试用、Pro会员订阅权限控制与自动扣费。

3、业务流程与功能路径：
用户登录平台 -> 检索起点并添加途经点与终点 -> 侧边栏配置出行方式、视角相机参数及视频分辨率 -> 实时预览3D轨迹运镜动画 -> 点击一键录制渲染导出MP4视频 -> 路线自动同步至云端控制台。

1、整体架构和设计思路：
- 前端：采用 Nuxt 3 (Vue 3 Composition API) + Tailwind CSS构建响应式现代界面，利用 GSAP 驱动高帧率运镜时间轴动画控制；
- 地图与渲染：以 Mapbox GL JS 为底层地图引擎，通过 WebGL 绘制 3D 地形、航线曲线贝塞尔插值及自定义动态图标图层；
- 服务端与存储：基于 Nuxt Nitro 搭建 Serverless API，配合 Prisma ORM 和PostgreSQL实现高并发鉴权、路线数据持久化及状态机管理；
- 支付体系：集成支付网关，利用服务端 Webhook 与 HMAC 签名校验实现试用期与订阅状态同步。

2、“我”的负责模块和结果（量化呈现）：
- 负责地图轨迹引擎与核心动画控制架构：完成多节点曲线平滑插值算法，3D 地图跟拍渲染帧率稳定在 60 FPS；
- 负责客户端零成本视频导出方案：通过直接捕获 WebGL Canvas Stream 结合 mp4-muxer 编码，规避高昂的服务端 GPU 渲染集群成本，将 1080P 视频导出等待时间缩短至秒级，服务器渲染成本直降 100%；
- 负责商业化支付模块与云端存储集成：打通支付 Webhook 状态机及 7 天试用流转，实现 99.9% 的支付事件处理准确率；实现路线 GeoJSON 轻量化存储，加载时延低于 200ms。

3、“我”遇到的难点、坑与解决方案：
- 难点1：WebGL Canvas 跨域及录制黑屏问题。Mapbox 默认每次渲染后会清理帧缓冲区，导致直接录制导出黑屏。解决方案：在地图初始化时开启 preserveDrawingBuffer: true，并将逐帧复制重构为直接捕获 Canvas Stream，降低 50% CPU 占用率；
- 难点2：多点复杂路径相机运镜剧烈抖动。大跨度旋转变向时相机视角易跳跃。解决方案：引入自适应分段插值与相机四元数平滑过渡，实现影视级平稳环绕跟拍；
- 难点3：Webhook 幂等性与重复投递问题。设计数据库唯一幂等锁机制与重试策略，确保用户订阅状态准确无误。