轨迹故事生成器 - 微信小程序

将你的轨迹数据转化为生动的故事叙述，配合腾讯地图进行可视化展示

功能特性

1. 轨迹数据处理

• 支持 GPX、KML、JSON 格式轨迹文件上传
• 自动解析轨迹数据（经纬度、时间戳、海拔等）
• 数据清洗和异常值处理
• 轨迹数据统计（总里程、平均速度、停留点识别）

2. 腾讯地图可视化

• 基于腾讯地图 JSAPI 进行轨迹可视化
• 支持多种地图样式切换
• 轨迹动画播放功能
• 3D 视角展示

3. AI 故事生成

• 三种故事风格：文艺风格、幽默风格、励志风格
• 自动生成故事封面
• 统计数据分析与呈现
• 章节式故事结构

4. 分享功能

• 生成分享海报
• 一键分享到微信好友/朋友圈
• 生成小程序码

5. 排行榜

• 总里程排行榜
• 故事数量排行榜
• 时长排行榜

项目结构

trajectory-story-generator/
├── pages/                      # 页面
│   ├── index/                  # 首页
│   ├── upload/                 # 轨迹上传
│   ├── visualize/              # 轨迹可视化
│   ├── story/                  # 故事生成
│   ├── share/                  # 分享
│   └── rank/                   # 排行榜
├── components/                 # 组件
│   ├── trajectory-player/      # 轨迹播放器
│   ├── story-card/             # 故事卡片
│   └── share-poster/           # 分享海报
├── utils/                      # 工具函数
│   ├── trajectory-parser.js    # 轨迹解析
│   ├── lbs-skill-wrapper.js    # 腾讯地图封装
│   ├── story-generator.js      # 故事生成器
│   └── data-processor.js       # 数据处理
├── services/                   # 服务层
│   ├── api.js                  # API 服务
│   └── storage.js              # 本地存储
├── assets/                     # 静态资源
│   └── images/                 # 图片资源
├── app.js                      # 应用入口
├── app.json                    # 全局配置
├── app.wxss                    # 全局样式
└── project.config.json         # 项目配置

快速开始

1. 安装依赖

本项目使用微信小程序原生开发，无需额外安装依赖。

2. 配置腾讯地图 Key

在以下文件中配置你的腾讯地图 Key：

• utils/lbs-skill-wrapper.js
• libs/qqmap-wx-jssdk.js

申请 Key：腾讯位置服务控制台

3. 配置 appid

编辑 project.config.json，将 appid 替换为你的小程序 appid：

{
  "appid": "你的小程序appid"
}

4. 添加 tabBar 图标

在 assets/images/ 目录下添加以下图标：

• home.png / home-active.png
• rank.png / rank-active.png

5. 导入项目

1. 打开微信开发者工具
2. 导入项目，选择 trajectory-story-generator 目录
3. 填入 appid
4. 完成导入

使用说明

上传轨迹

1. 在首页点击「上传轨迹」
2. 选择 GPX/KML/JSON 格式的轨迹文件
3. 系统自动解析并显示轨迹概览

查看可视化

1. 上传轨迹后点击「查看可视化」
2. 可以在地图上查看完整轨迹
3. 点击播放按钮观看轨迹动画
4. 可切换地图样式（普通/卫星/暗色）

生成故事

1. 在可视化页面点击「生成故事」
2. 选择故事风格（文艺/幽默/励志）
3. 可输入昵称进行个性化定制
4. 点击「开始生成故事」

分享

1. 生成故事后点击「生成分享海报」
2. 可保存图片或直接分享

API 参考

轨迹解析 (trajectory-parser.js)

const parser = require('./utils/trajectory-parser.js')

// 解析轨迹文件
const result = parser.parse(content, 'gpx')  // content: 文件内容, type: gpx|kml|json

// 结果包含
result = {
  points: [...],           // 轨迹点数组
  metadata: {
    name: '轨迹名称',
    totalDistance: 8560,   // 总距离（米）
    totalTime: 7200,       // 总时长（秒）
    elevationGain: 45,     // 海拔增益（米）
    maxSpeed: 6.5,         // 最高速度（km/h）
    avgSpeed: 4.2,         // 平均速度（km/h）
    duration: '2小时'       // 格式化时长
  }
}

故事生成 (story-generator.js)

const generator = require('./utils/story-generator.js')

// 生成故事
const story = generator.generate(trajectoryData, options)

// 选项
options = {
  style: 'literary',  // literary | humorous | motivational
  nickname: '旅行者',
  language: 'zh'
}

// 获取支持的故事风格
const styles = generator.getStyles()

腾讯地图封装 (lbs-skill-wrapper.js)

const lbs = require('./utils/lbs-skill-wrapper.js')

// 获取轨迹可视化配置
const config = lbs.getTrajectoryConfig(points, options)

// 获取标记点配置
const markers = lbs.getMarkersConfig(points, options)

// 逆地址解析
lbs.reverseGeocoder(lat, lon).then(result => ...)

// 地理编码
lbs.geocoder(address).then(result => ...)

注意事项

1. 定位权限：使用位置相关功能需要在 app.json 中声明权限
2. 文件上传：微信小程序对文件大小有限制，建议轨迹文件不超过 10MB
3. 地图 Key：生产环境请使用正式 Key，体验 Key 有调用频次限制

技术栈

• 微信小程序原生框架
• 腾讯地图 JSAPI
• 腾讯位置服务 SDK

License

MIT License