Locusify — 上传旅行照片，自动生成路线地图和回放视频
做了个小工具，解决一个自己的痛点：每次旅行拍了几百张照片，回来想看看完整路线，要么手动在地图上标点，要么用剪辑软件一帧帧做。太麻烦了。
思路很简单——手机拍的照片本身就带 GPS 坐标（EXIF 里），把这些坐标提出来，往地图上一扔，路线就有了。再加个按时间线的动画回放，录成 MP4，就是一段现成的旅行 Vlog。
功能
- 上传照片（JPG / PNG / HEIC / WebP / AVIF），自动读取 EXIF GPS 坐标
- 交互式地图绘制路线，照片标记 + 聚合 + 轨迹动画
- 时间线回放，支持摄像机跟随、速度调节
- 录制回放导出 MP4，支持 Web Share API 直接分享
- 中英双语，深色/浅色模式
- 全部浏览器端处理，不上传任何数据
最后一点是刻意的设计选择。照片包含精确的地理位置，属于敏感数据，没有理由让它离开用户的设备。
技术实现
| 框架 | React 19（开了 Compiler） |
| 语言 | TypeScript strict mode |
| 构建 | Vite 7 |
| 样式 | Tailwind CSS 4 |
| 地图 | MapLibre GL |
| 状态管理 | Zustand |
| 数据请求 | TanStack Query |
| 动画 | Motion |
| UI 组件 | Radix UI |
| GPS 提取 | exifr |
纯前端项目，没有后端。GPS 解析、地图渲染、轨迹计算、视频录制全在浏览器里跑。视频录制用的 MediaRecorder API 抓取 canvas 流，编码成 MP4。
几个实现上的点
HEIC 支持：iPhone 默认拍 HEIC，浏览器原生不支持，需要在前端做格式转换后再读 EXIF。
照片聚合：照片多了地图会糊成一片，低缩放级别下把邻近点合并成聚合标记，放大后再展开。
回放动画：按照片拍摄时间排序，沿路线做插值动画，摄像机跟随当前位置。速度可调。
视频导出：用 MediaRecorder 录制地图 canvas，导出 MP4。支持 Web Share API，移动端可以直接分享到微信、相册等。
后续打算做的
- 旅行历史——保存行程，下次打开能看到
- 多行程合并——同一张地图上叠加多次旅行
- GPX 导出——给需要的人用
最后
代码开源在 GitHub：github.com/caterpi11ar…
有问题或建议欢迎提 issue。
