全球气象实况可视化平台 (T12)

项目概述

基于 Vue 3 + 天地图 + ECharts 的中国区域气象实况可视化平台。展示50个主要城市的逐小时气温和降水数据，支持时间轴回放、热力图渲染、城市点查等功能。

项目结构

XINGIS/
├── index.html               # 主页面入口
├── css/
│   └── style.css            # 深色主题样式表
├── js/
│   └── app.js               # 核心应用逻辑（Vue3 + 地图 + 图表）
├── data/
│   ├── weather_data.js      # 前端数据文件（JS 全局变量格式）
│   ├── weather_points.geojson    # 城市点位（原始 GeoJSON）
│   ├── weather_series.json       # 逐小时时序数据（原始 JSON）
│   ├── data_metadata.json        # 数据元信息
│   └── 数据说明.md               # 数据说明文档
├── scripts/
│   ├── download_meteo_data.py    # 数据抓取脚本（Python）
│   ├── download_meteo_data.mjs   # 数据抓取脚本（Node.js）
│   └── package.json              # Node.js 依赖配置
├── .gitignore               # Git 忽略规则
└── README.md                # 本文件

功能特性

功能	说明
天地图底图	矢量底图 + 中文注记，支持缩放/拖拽
热力图渲染	基于 Canvas 的温度/降水径向渐变热力覆盖层
城市点位标记	50个城市彩色圆点标记，颜色随气象变量变化
气温/降水切换	一键切换显示气温（蓝-黄-红色阶）或降水（蓝-紫色阶）
时间轴回放	192小时逐时数据，支持滑块拖动/播放/速度控制
实时统计	全国平均/最高/最低气温、平均/最大降水
城市搜索	按名称/省份/区域搜索城市，点击飞入定位
趋势图表	ECharts 气温折线图 + 降水柱状图，当前时刻标记线
排行榜	气温/降水 Top 10 城市排名

技术栈

• 前端框架：Vue 3 (CDN)
• 地图引擎：天地图 API v4.0
• 图表库：ECharts 5.5.0
• 数据源：Open-Meteo 免费天气 API
• 数据格式：GeoJSON (点位) + JSON (时序)

快速开始

方式一：直接打开

1. 确保网络连接（需要加载 CDN 资源）
2. 用浏览器直接打开 index.html

方式二：本地服务器

# 使用 Python
python -m http.server 3000 -d .

# 或使用 Node.js
npx serve . -p 3000

# 或使用 VS Code Live Server 插件

然后访问 http://localhost:3000

数据更新

cd scripts
pip install requests
python download_meteo_data.py

天地图密钥

项目中使用密钥：195db652072d5e01f4e7c8ca772e4be2 （密钥通过 <script> URL 参数传入）