️ 城市天气查询系统 (City Weather Dashboard)
这是一个基于Vue.js 3构建的现代化天气查询 Web 应用。它集成了数据可视化图表和交互式地图，能够为用户提供直观、详细的城市天气信息，包括当前天气、未来 7 天预报、温度走势图以及地理位置展示。
本前端软件天气图标来源
✨ 主要能力
- 城市搜索: 拥护输入城市名称（拥护中文拼音或英文）进行全球城市搜索。
- ️ 实时天气: 显示查询城市的当前温度、天气状况及对应的天气代码。
- 7 天预报卡片: 以卡片形式直观展示未来一周的天气图标、天气描述及最高/最低气温。
- 温度趋势图: 使用 ECharts绘制平滑折线图，展示未来一周的最高温和最低温走势。
- ️ 交互式地图: 使用 Leaflet自动定位到查询城市，支持缩放、平移，并提供多种地图图层切换（街道图、卫星图、地形图等）。
- 响应式布局: 界面整洁，利用 Flexbox 布局适配不同屏幕区域。
️ 技术栈
本项目纯前端实现，无需后端服务，依赖以下开源库和 API：
核心框架与库
- HTML5 / CSS3: 页面结构与样式布局。
- Vue.js 3 (CDN): 用于处理数据绑定、DOM 更新及应用逻辑。
- ECharts 5 (CDN): 用于绘制交互式温度折线图。
- Leaflet.js (CDN): 用于加载地图瓦片和进行地理定位。
数据源 API
- OpenWeatherMap Geo API: 用于将城市名称转换为经纬度坐标。
- 端点: http://api.openweathermap.org/geo/1.0/direct(需要api,请在源码此处添加api,免费拥有)网址
// API密钥
const apiKey = "";- Open-Meteo API: 用于获取详细的气象数据（无需 API Key）。
- 端点: https://api.open-meteo.com/v1/forecast
- Weather Icons: 使用 bmcdn.nl 提供的 SVG 天气图标。图标来源
文件结构说明
Plaintext
Project_Root/
│
├── index.html # 项目入口文档，包含 HTML 结构和库的引入
├── style.css # 全局样式记录，定义 Flex 布局和组件样式
├── app.js # 核心逻辑文件，包含 Vue 实例、API 请求和地图逻辑
├── WeatherWeek.js # 负责渲染未来 7 天天气卡片的逻辑
└── T_Curve.js # 负责初始化和更新 ECharts 温度折线图的逻辑
快速开始
1. 克隆或下载项目
将所有档案下载到本地同一个文件夹中。
2. 设置 API Key (可选但推荐)
在 app.js 文件顶部，默认提供了一个 OpenWeatherMap 的测试 Key。为了保证稳定性，建议替换为您自己的 Key：
JavaScript
// app.js 第 4 行
const apiKey = “YOUR_OPENWEATHERMAP_API_KEY”;
3. 运行项目
由于启用了 ES6 模块和部分跨域资源，建议使用本地服务器运行，而不是直接双击打开 HTML 文件。
方法 A：使用 VS Code Live Server 插件（推荐）
- 在 VS Code 中打开方案文件夹。
- 右键点击 index.html。
- 选择 “Open with Live Server”。
方法 B：使用 Python
在任务目录下打开终端，运行：
Bash
# Python 3
python -m http.server 8000
然后在浏览器访问 http://localhost:8000。
使用指南
https://github.com/user-attachments/assets/23b3f391-356d-41d1-82ee-a6b4b9d7921d
- 输入城市: 在页面左上角的输入框中输入城市名称（例如：“Beijing”, “London”, “Shanghai”）。
- 点击查询: 点击“查询天气”按钮。
- 查看结果:
- 左上区域: 显示正在查询的状态以及查询成功后的当前简要天气。
- 右上区域: 显示未来一周的文字版摘要。
- 中间横排: 显示 7 张精美的天气卡片。
- 左下区域: 查看未来一周的温度变化曲线。
- 右下区域: 地图自动飞往该城市。你可以点击地图右上角的图层控制器切换“卫星图”或“地形图”。
代码模块详解
app.js
- 初始化 Vue 应用。
- getWeather(): 处理用户输入，调用 Geo API 获取经纬度。
- getWeatherOfCity(): 根据经纬度调用 Open-Meteo 获取气象信息。
- getWeatherCode(): 一个巨大的 switch 函数，将 WMO 天气代码转换为中文描述和 Emoji。
- map: Leaflet 地图的初始化、图层控制和 flyTo 动画逻辑。
T_Curve.js
- 使用 ECharts 初始化图表实例。
- updateChart(data): 接收 API 数据，解析最高/最低气温，并配置图表的渐变色样式和 Tooltip。
WeatherWeek.js
- WeatherWeek(data): 处理每日天气数据。
- getWeatherIcon(code): 根据天气代码返回对应的 SVG 图标 URL。
- updateWeatherCard(…): 动态更新 DOM 中的卡片 HTML 内容。
网站预览
本代码已经部署在网页可直接访问
https://weatherforecastfromnoterai.netlify.app/
源码共享
gitee网站分享