跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
Java大前端java

基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建

基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建。利用 Java 后端查询省会城市空间信息,集成百度天气接口获取实时及预报数据。前端采用 HTML5、CSS3 和 JavaScript,结合 Leaflet 框架实现地图可视化。通过隐藏视频标签播放背景音乐,使用定时器实现城市轮播展示,完成了一个兼具复古风格与现代技术的天气预报应用。

深海蔚蓝发布于 2026/4/8更新于 2026/10/2396 浏览
基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建

一、省会城市信息构建

在进行省会城市天气预报的 WebGIS 可视化开发之前,首先需要对全国的省会城市信息进行查询。后面调用百度天气接口时需要使用省会城市名称。

1、省会城市空间查询

查询语句如下:

SELECT T.NAME cityName, T.pinYin, T.bz, T.slx, tc.code provinceCode, tc.NAME provinceName, st_x(T.geom) cityLon, st_y(T.geom) cityLat, dict.dict_label provinceAbbreviations, st_asgeojson(tc.geom) geomJson 
FROM biz_geographic_name T, biz_province tc, sys_dict_data dict 
WHERE T.bz IN ('省会城市', '直辖市', '首都') AND st_contains(tc.geom, T.geom) AND dict.dict_value = tc.code 
ORDER BY tc.code

在 Navicat 客户端中执行以上语句后,可以看到查询结果。后续操作中需要使用返回结果中的省会城市中心点经纬度位置来进行天气查询。

2、Java 后台查询

将相关的查询逻辑封装成 Java 接口供前端调用。Mapper.java 的核心代码如下:

static final String FIND_PROVINCEABBREVIATIONS_LIST = "<script>" + " SELECT T.name cityName,T.pinYin,T.bz,T.slx,tc.code provinceCode,tc.NAME provinceName," + " st_x(T.geom) cityLon,st_y(T.geom) cityLat,dict.dict_label provinceAbbreviations," + " st_asgeojson(tc.geom) geomJson" + " FROM biz_geographic_name T,biz_province tc,sys_dict_data dict" + " WHERE T.bz IN ('省会城市', '直辖市', '首都') AND st_contains(tc.geom, T.geom) AND dict.dict_value = tc.code" + " order by tc.code" + "</script>";
@Select(FIND_PROVINCEABBREVIATIONS_LIST)
List<ProvinceAbbreviationsVo> findProvinceAbbreviations();

为了方便方法复用,将 Mapper 的查询能力封装成一个通用的方法,在 Service 中进行实现。Service 的调用代码如下:

@Override
 List<ProvinceAbbreviationsVo>  {
     .baseMapper.findProvinceAbbreviations();
}
public
findProvinceAbbreviations
()
return
this

最后实现一个 Controller 来将 Service 的服务接口对外提供出来。

二、Java 省会城市天气查询

有了查询省会天气的服务之后,可以根据不同省会城市的经纬度,利用百度天气接口的国内经纬度查询能力,直接返回对应城市的天气以及未来的天气预报。

1、与百度开放平台集成天气

为了实现根据省会城市的经纬度来查询所在城市的天气信息,需要定义百度天气接口的方法:

/**
 * - 根据经纬度和坐标类型查询指定地点的天气信息
 * @param location 经纬度,经度在前纬度在后,逗号分隔。支持类型:bd09mc/bd09ll/wgs84/gcj02
 * @param data_type 请求数据类型。数据类型有:now/fc/index/alert/fc_hour/all,控制返回内容,默认值无
 * @param coordtype 支持类型:wgs84/bd09ll/bd09mc/gcj02 默认值:wgs84
 * @return
 */
@GetHttpInterface("/")
public HttpResponse<String> getByLocation(@QueryPar("location") String location, @QueryPar("data_type") String data_type, @QueryPar("coordtype") String coordtype);

有了这个接口之后,从前面获取的省会城市列表中循环调用,传入省会城市的经纬度位置就可以实现天气情况的查询。调用实例代码如下:

/**
 * 获取省会城市天气预报信息
 * @throws InterruptedException
 */
@Test
public void testGetProvinceWeather() throws InterruptedException {
    Random random = new Random();
    List<LinkedHashMap<String, Object>> provinceWeatherData = new ArrayList<LinkedHashMap<String,Object>>(34);
    List<ProvinceAbbreviationsVo> provinceList = geographicNameService.findProvinceAbbreviations();
    Gson gson = new Gson();
    for (ProvinceAbbreviationsVo vo : provinceList) {
        //经纬度,经度在前纬度在后,逗号分隔。
        String location = vo.getCityLon() + "," + vo.getCityLat();
        HttpResponse<String> result = baiduWeatherApiService.getByLocation(location, DATA_TYPE, "wgs84");
        if(StringUtils.isNotEmpty(result.getBodyResult())) {
            LinkedHashMap<String, Object> map = new LinkedHashMap<String, Object>();
            map.put("lat", vo.getCityLat());
            map.put("lon", vo.getCityLon());
            map.put("city", vo.getCityName());
            BdWeatherDTO bdWeatherInfo = gson.fromJson(result.getBodyResult(), BdWeatherDTO.class);
            WeatherInfoDTO weatherInfoDTO = bdWeatherInfo.getResult();
            map.put("w_name", weatherInfoDTO.getWeatherNow().getText());
            List<WeatherForecasts> forecasts =weatherInfoDTO.getForecasts();
            if(StringUtils.isNotEmpty(forecasts)) {
                WeatherForecasts today = forecasts.get(0);
                map.put("temp", today.getLow() + "-" + today.getHigh());
                WeatherForecasts tomorrow = forecasts.get(1);
                Date tempDate = tomorrow.getDate();
                String two = (tempDate.getMonth() + 1) + "-" + tempDate.getDate() + " "+ tomorrow.getLow() + "-" + tomorrow.getHigh();
                map.put("two", two);
            }
            provinceWeatherData.add(map);
        }
        Thread.sleep(1500 + random.nextInt(1000));
    }
    String weatherStr = gson.toJson(provinceWeatherData);
    System.out.println(provinceWeatherData);
    System.out.println(weatherStr);
}

需要说明的是,这里采用线程休眠的原因是为了避免造成并发调用。

2、响应对象属性介绍

为了方便标注,实现省会城市的实时天气信息展示以及未来一天的天气情况展示,需要定义一个标准的响应对象。示例如下:

{
  "lat":"39.903162481",
  "lon":"116.401006456",
  "city":"北京市",
  "w_name":"晴",
  "temp":"-2-10",
  "two":"12-8 -4-5"
}
序号参数名称说明
1lat纬度
2lon经度
3city城市名称
4w_name天气说明
5temp气温
6two明日天气

3、省会天气实况展示

这里以 12 月 7 日为例,使用上述程序查询出来 12 月 7 日到 12 月 8 日两天的省会城市天气预报数据如下:

[{"lat":"39.903162481","lon":"116.401006456","city":"北京市","w_name":"晴","temp":"-2-10","two":"12-8 -4-5"}, ... ]

三、WebGIS 应用构建

本节将重点介绍如何在 WebGIS 中进行应用的构建,在使用百度天气创建好相应的省会城市列表的天气信息后,接下来要做的就是要集成经典的天气预报背景音乐,同时使用 Leaflet 来标注所有的省会城市位置,并且要展示天气信息,最后要根据位置来实现城市的轮播展示。

1、背景音乐集成

背景音乐这里找了一个很经典的。在 html 中增加一个在线视频,然后隐藏画面,只保留音乐,核心代码如下:

<!-- 视频标签,设置为循环播放,但初始时不自动播放 -->
<video loop muted>
  <source src="./weather/music.mp4" type="video/mp4">
  您的浏览器不支持 HTML5 视频。
</video>

为了隐藏画面,这里使用 CSS 样式的方式进行控制:

/* 隐藏视频画面 */
video { display: none; }

为了演示的效果,设置网页进行延迟播放:

// 获取视频元素和按钮
var video = document.getElementById('backgroundVideo');
// 设置音量为 20%
video.volume = 0.2;
var button = document.getElementById('playButton');
// 页面加载后延迟 2 秒自动播放
window.onload = function() {
    initWeather();
    setTimeout(function() {
        video.play(); // 开始播放
        video.muted = false; // 取消静音
        preview();//城市天气进行轮播
    }, 5000); // 2000 毫秒(2 秒)后执行
};

2、城市标记及天气展示

城市标记及天气展示比较简单,使用 Leaflet 来进行位置的标注即可,这里给出示例代码:

function initWeather(){
    var collisionLayer = L.LayerGroup.collision({margin:3});
    for(var i=0;i<dataJson.length;i++){
        var marker = L.marker([dataJson[i].lat, dataJson[i].lon], { icon: L.divIcon({ iconSize: null, className: '', popupAnchor:[5,5], shadowAnchor:[5,5], html: buildHtml(dataJson[i],i) }) }).addTo(collisionLayer);
    }
    collisionLayer.addTo(map);
}

天气的信息标注代码如下,通过以上代码就可以实现今日天气和明日天气的网页展示:

function buildHtml(dataJson,index){
    var html = "";
    html += "<div style='color:"+getRandomColor()+"' class='animation-spaceInDown'><div ><b>"+dataJson.city + "&nbsp;" + dataJson.w_name + "&nbsp;"+ dataJson.temp +"℃</b><span></span></div>";
    html += "<div>" + ""+ dataJson.two+ " ℃</div>";
    html += "</div>";
    return html;
}

最后还有一个随机颜色的生成,使用随机颜色是为了保证生成的页面的颜色能够更加区别明显。

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

3、城市轮播

为了实现每个省会城市都可以进行轮播,这里我们根据位置将地图的视图中心点进行重绘。最终的效果看起来就是一个会跳动的地图。这里我们使用定时器的方式来进行切换不同城市。核心代码如下:

function preview(){
    // 设置定时器,每隔 2 秒执行一次
    const intervalId = setInterval(() => {
        // 如果索引超出了数组范围,清除定时器并停止执行
        if (currentIndex >= dataJson.length) {
            currentIndex = 0;
        }
        // 获取当前索引对应的元素
        const currentElement = dataJson[currentIndex];
        //如果不为空,先移除 marker
        if(dymicMarker != null){
            map.removeLayer(dymicMarker);
        }
        dymicMarker = L.marker([currentElement.lat, currentElement.lon]).addTo(map);
        setTargetSelect(dymicMarker);
        console.log(`当前元素:${currentElement}`);
        map.setView([currentElement.lat, currentElement.lon],8);
        // 索引加 1,准备获取下一个元素
        currentIndex++;
    }, 3000);
}
function setTargetSelect(e){
    var i = 1
    var int = setInterval(() => {
        if(!e._map) clearInterval(int)
        if (i < -1) { i = 1 }
        i = i - 0.08
        if (i < 0) e.setOpacity(i * -1)
        else e.setOpacity(i)
    },60)
}

4、成果展示

经过以上的步骤,基本就可以实现带音乐播放的天气小应用。页面效果如下:

成果展示

目录

  1. 1、省会城市空间查询
  2. 2、Java 后台查询
  3. 1、与百度开放平台集成天气
  4. 2、响应对象属性介绍
  5. 3、省会天气实况展示
  6. 1、背景音乐集成
  7. 2、城市标记及天气展示
  8. 3、城市轮播
  9. 4、成果展示

更多推荐文章

查看全部
  • Z-Image-Turbo 与商业 AI 绘画平台对比评测
  • Java 入门全攻略:从历史到实战资源精选
  • Vivado 2023.2 安装教程:从零搭建 FPGA 开发环境
  • 架构演进实战:从单机到分布式,Redis 的核心价值
  • Agent Memory 相关文献追踪:异构存储与经验记忆
  • 基于 Docker 部署 AI 量化分析平台及波浪理论应用
  • RPA 机器人流程自动化技术解析与应用
  • ComfyUI ControlNet 模型推荐清单(2025 版)
  • Spring Boot 结合 Leaflet 实现省级旅游口号 WebGIS 可视化
  • .NET 转 Java 实战指南:高效迁移路径
  • 基于 ESP32 的无人机飞控日志 SD NAND 存储方案测试
  • Kiro 安装与上手:规范驱动的 AI IDE
  • OpenClaw 本地 AI 智能体部署与实战指南
  • 数据产品经理与 AI 产品经理的核心区别与发展前景
  • Tomcat 下载、安装与环境配置实战指南
  • ComfyUI 深度解析:高性能 AI 绘画工作流实践
  • 多模态文本智能技术:AI 从感知到认知与守护的演进路径
  • AI 编程工具 Claude Code 实战
  • C++ STL 容器 set 与 map 使用详解
  • UI-UX-Pro-Max Skill 使用指南:利用 AI 辅助前端界面开发

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online