3D 旅行日志与个人足迹系统
TripsTracer
一个将目的地、影像与共同旅程转化为互动式个人地球的空间化旅行日志。
- Year
- 2025–2026
- Role
- 产品设计与全栈开发
- React
- CesiumJS
- Spring Boot

Project overview
TripsTracer 是一款个人旅行日志应用,将分散的目的地、照片、视频和文字记录整理成一份持续生长的旅行档案。
它没有采用传统的列表式旅行记录,而是将每个目的地放在互动式 2D 地图与 3D 地球上,让用户能够在地点、行程、影像、花费和回忆之间自然探索。
01
Background
旅行记忆通常散落在手机相册、电子表格、地图收藏和社交平台中。TripsTracer 希望将这些碎片重新连接起来,为每段旅程保留其地理位置、发生时间和个人故事,形成一个私密且结构清晰的旅行空间。
02
The problem
项目的核心问题,是如何让不断增长的旅行档案保持易于浏览,同时又不让它退化成一个普通数据库。产品需要连接地点、行程、日期、花费、笔记、照片和视频,并让这些信息在地图视图与详情视图中都保持清晰且具有吸引力。
03
Major features
互动式旅行地球
将去过的目的地展示在可自由旋转和缩放的 2D 地图与真实感 3D 地球上,并通过筛选、旅行统计和地点预览,将每个坐标连接到背后的旅行故事。
带有情境的旅行记录
用户可以为目的地添加照片和视频,从照片的 EXIF 信息中自动读取拍摄地点与日期,管理封面媒体,并将选中的旅行影像制作成可下载的旅行卡片。
行程、花费与协作
多个目的地可以组成完整行程,并记录日期、笔记、标签和多币种花费;用户还可以通过邀请和角色权限,与朋友共同查看和维护一段旅程。
那年今日
系统会重新呈现往年同一天发生的旅行,并以回忆时间线的方式组织相关影像,让旅行档案不只是被保存,也值得被反复打开。
04
Implementation process
- 01
建立旅行领域模型
将目的地、行程、媒体、花费、用户和权限设计为彼此关联的数据对象,使同一段旅程能够从地理、时间和协作等不同角度进行探索。
- 02
连接记录与探索流程
设计从点击地图或导入照片,到创建目的地、补充旅行信息,再通过地球、行程详情和回忆时间线重新发现内容的完整体验。
- 03
构建完整媒体处理链路
实现照片与视频上传、云端存储、异步视频处理、缩略图生成和实时状态更新,同时保持前端界面的及时响应。
- 04
完善数据归属与访问控制
通过 JWT、第三方 OAuth、默认私密的数据策略、旅行邀请和角色权限系统,让共同旅程在便于协作的同时仍然由所有者控制。
05
Technical challenges
在丰富的三维体验中保持流畅
真实地形、旅行标记、媒体预览、统计信息和导航需要同时存在,因此必须针对资源加载、懒加载、视觉层级和渲染性能进行持续优化。
保持媒体与共享数据一致
大文件上传、异步视频处理、实时状态更新、封面切换和协作权限,需要在 React 客户端、Spring Boot API、PostgreSQL 和云存储之间保持同步。
06