ChinaWeatherMap 全国气象地图

覆盖中国区域（70–140°E / 0–60°N）的纯静态气象可视化网站：在 Leaflet 地图上叠加自渲染的 GFS 预报/实况色斑瓦片、风场粒子动画、降水雷达与台风路径。无后端、无数据库，发布物即 dist/ 静态文件。

功能

• 8 个标量图层：2m 温度、短波辐照度、总云量、相对湿度、时段累计降水、雷暴潜势 CAPE（预报）＋ 实况温度、实况湿度（观测）
• 10m / 100m 预报风场与实况风场粒子动画（leaflet-velocity）
• RainViewer 降水雷达实况叠加
• 台风路径（中央气象台台风网，多预报机构着色，含历史回放与"已停编"标注）
• 19 个预报时次（f000–f168）时间轴播放，下一时次瓦片静默预取
• 点击地图查值：0.5° 格点数值 ＋ 省/市/区三级离线反向地理编码
• 高德 webrd 底图（带暗色 CSS 滤镜）

技术栈

React 19 · TypeScript · Vite 7 · Tailwind CSS v3 · shadcn/ui · Leaflet · leaflet-velocity · react-router

数据来源

• NOAA GFS 0.25°（预报 / 实况分析场）
• RainViewer（降水雷达实况）
• 中央气象台台风网（台风路径）

目录结构

src/
  components/    WeatherMap（地图主体）、ControlPanel、TimeSlider、Legend、ui/（shadcn 组件）
  pages/Home.tsx 页面组装与全局状态
  lib/           反向地理编码等工具
  types/         元数据与台风类型定义
pipeline/        每日数据更新管线（daily_run.sh 总控 + 5 个 GFS 处理脚本，详见其 README）
public/
  meta.json      数据版本锚点：起报时次、时次表、图层定义、地图范围（bbox）
  tiles/         预渲染色斑瓦片 PNG（z3–z5，8 图层 × 19 时次，约 205 MB）
  wind/          风场粒子动画数据（leaflet-velocity 格式 JSON）
  values/        点击查值用的 0.5° 格点数值 JSON
  data/          行政区划边界 GeoJSON（362 个市区）、省界、台风路径

public/ 下的全部气象数据（约 230 MB）由外部数据管道每日从 NOAA GFS 生成，不纳入 git 管理，经 rsync 发布到服务器。

本地开发

需要 Node.js 20+：

npm ci --allow-remote=all
npm run dev      # http://localhost:3000

注意：开发前需确保 public/ 下的数据已就位（由数据管道生成或从服务器拷贝），否则地图无数据可显示。

构建

npm run build    # tsc -b && vite build，产物输出到 dist/

构建 base 为相对路径 ./，产物可挂在任意子路径（如 https://example.com/weather/）下，无需改配置重新构建。

部署

纯静态托管（nginx / Caddy / 对象存储 + CDN 均可），每日数据经 rsync 增量更新。完整部署方案、Web 服务器配置、每日更新管线与上线验证清单见 全国气象地图部署说明.md；针对腾讯云香港服务器 + GoDaddy 域名的具体操作步骤见 腾讯云部署.md。