北京地铁实时客流监控 PWA

🚇 北京地铁全线路实时客流点云监控 - 渐进式Web应用

功能特点

• ✅ 支持 24条北京地铁线路 实时客流监控
• ✅ PWA 支持 - 可添加到手机桌面，离线访问
• ✅ 实时更新 - 每秒刷新客流数据
• ✅ 点云可视化 - 直观展示客流变化趋势
• ✅ 移动端优化 - 完美适配手机屏幕
• ✅ 全屏模式 - 沉浸式体验
• ✅ 分享功能 - 一键分享给好友

文件结构

metro-pwa/
├── index.html          # 主应用文件
├── manifest.json       # PWA 配置清单
├── sw.js              # Service Worker (离线缓存)
├── generate-icons.html # 图标生成工具
├── offline.html       # 离线提示页面
└── icons/             # 应用图标文件夹
    ├── icon-72.png
    ├── icon-96.png
    ├── icon-128.png
    ├── icon-144.png
    ├── icon-152.png
    ├── icon-192.png
    ├── icon-384.png
    └── icon-512.png

快速部署

方法一：GitHub Pages（推荐，免费）

1. 创建 GitHub 仓库

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/你的用户名/metro-pwa.git
   git push -u origin main

2. 启用 GitHub Pages

   • 进入仓库 Settings → Pages
   • Source 选择 main 分支
   • 点击 Save

3. 访问应用

   • 等待几分钟后访问：https://你的用户名.github.io/metro-pwa/

方法二：Vercel（推荐，免费）

1. 安装 Vercel CLI：

   npm i -g vercel

2. 部署：

   cd metro-pwa
   vercel

3. 按提示完成部署，获得 HTTPS 地址

方法三：本地测试

# 使用 Python 简易服务器
cd metro-pwa
python -m http.server 8080

# 或使用 Node.js
npx serve .

访问 http://localhost:8080

生成图标

1. 在浏览器中打开 generate-icons.html
2. 点击每个图标下方的"下载"按钮
3. 将下载的图标保存到 icons/ 文件夹
4. 确保文件名正确（如 icon-192.png）

PWA 安装

iOS (iPhone/iPad)

1. 在 Safari 中打开应用网址
2. 点击底部的"分享"按钮（方框箭头）
3. 选择"添加到主屏幕"
4. 点击"添加"

Android

1. 在 Chrome 中打开应用网址
2. 点击右上角菜单（三个点）
3. 选择"添加到主屏幕"或"安装应用"
4. 确认安装

桌面浏览器

• Chrome: 地址栏右侧会出现"安装"图标
• Edge: 地址栏右侧会出现"安装"图标

数据说明

⚠️ 重要提示：当前应用使用模拟数据，基于北京地铁历史客流规律生成。

如需真实数据，可考虑：

1. 申请北京市交通委员会数据接口
2. 接入高德地图SDK（需商业授权）
3. 使用 MetroDB.org 历史数据

技术栈

• 前端: 原生 HTML/CSS/JavaScript
• 可视化: Canvas 2D
• PWA: Service Worker + Web App Manifest
• 响应式: 移动端优先设计

浏览器支持

• ✅ Chrome 67+
• ✅ Safari 11.1+
• ✅ Firefox 44+
• ✅ Edge 79+
• ✅ iOS Safari 11.3+
• ✅ Android Chrome 67+

许可证

MIT License

作者

北京地铁客流监控项目组