跳到主要内容
基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建 | 极客日志
Java 大前端 java
基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建 综述由AI生成 介绍如何使用 Java 后端结合百度天气 API 获取省会城市天气数据，并通过 WebGIS 技术（Leaflet）在前端展示。主要步骤包括：通过 SQL 查询获取全国省会城市空间信息及经纬度；在 Java 中封装 Mapper 和 Service 调用百度接口获取实时及预报天气；前端使用 HTML5、CSS3 和 JavaScript 集成背景音乐，利用 Leaflet 在地图上标记城市并轮播展示天气实况。系统实现了复古风格与现代数据的结合。
人间过客 发布于 2026/4/6 更新于 2026/5/20 前言
在数字技术飞速发展的今天，现代技术手段可以重现老式天气预报的风格。WebGIS 技术的出现，为我们提供了将地理信息与网络技术相结合的机会，实现地图的可视化展示和数据的动态交互。整合百度天气提供的实时数据，确保天气信息的准确性和及时性。通过 WebGIS 技术，可以在地图上直观地展示不同地区的天气情况。
我们的目标是构建一个能够唤醒 80 年代记忆的老式天气预报系统。这个播报系统需要播放熟悉的背景音乐。在播报形式上，播报内容将涵盖基本的天气信息，如温度、时间和明日天气等。尽管界面和播报形式是 80 年代的风格，但数据来源却是现代的。我们将整合百度天气提供的实时数据，确保天气信息的准确性和及时性。通过 WebGIS 技术，我们可以在地图上直观地展示不同地区的天气情况，用户可以通过简单的操作查看全国各地的天气预报。
在构建这样一个系统的过程中，我们面临着诸多技术挑战。为此，我们将采用现代的前端开发技术，如 HTML5、CSS3 和 JavaScript，结合 WebGIS 框架，实现一个既复古又现代的界面。此外，我们还需要编写一套符合当时风格的播报脚本，确保播报内容的准确性和趣味性。最后，整合百度天气数据并将其与 WebGIS 地图相结合，需要解决数据格式转换、地图渲染优化等问题。
一、省会城市信息构建
在进行省会城市天气预报的 WebGIS 可视化开发之前，首先我们需要对全国的省会城市信息进行查询。在后面调用百度天气接口时也需要使用省会城市名称。因此这里首先介绍如何查询省会城市空间信息以及如何在 Java 中进行后台的城市信息查询。
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 后台查询
在 SQL 中实现上述的查询之后，接下来我们就可以将相关的查询逻辑封装成 Java 接口，来供前端调用。在 Java 中的 Mapper 类来实现以上的查询服务，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)
findProvinceAbbreviations
()
当然，为了方便方法的复用，这里我们将 Mapper 的查询能力封装成一个通用的方法，在 Service 中进行实现，通过提供对外方法，供第三方服务进行调用。Service 的调用比较简单，代码如下：
@Override
public List<ProvinceAbbreviationsVo> findProvinceAbbreviations () {
return this .baseMapper.findProvinceAbbreviations();
}
最后实现一个 Controller 来将 Service 的服务接口对外提供出来。
二、Java 省会城市天气查询 有了这个查询省会天气的服务之后，接下来我们就可以根据不同省会城市的经纬度，利用百度天气接口的国内经纬度查询能力，直接返回对应城市的天气以及未来的天气预报。本节就来深入介绍一下如何使用经纬度来进行查询天气，并且对相应对象的属性进行一个简单的介绍。
1、与百度开放平台集成天气 为了实现根据省会城市的经纬度来查询所在城市的天气信息，首先我们需要定义百度天气接口的方法，定义方法如下：
@GetHttpInterface("/")
public HttpResponse<String> getByLocation (@QueryPar("location") String location, @QueryPar("data_type") String data_type, @QueryPar("coordtype") String coordtype) ;
有了这个接口之后，接下来我们就可以从前面获取的省会城市列表中来进行循环调用，传入省会城市的经纬度位置就可以实现天气情况的查询。调用实例代码如下：
@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、响应对象属性介绍 为了方便标注，实现省会城市的实时天气信息展示以及未来一天的天气情况展示，需要定义一个标准的响应对象，通过上述代码可以看出我们使用一个 hashmap 来进行实现。示例如下：
{
"lat" : "39.903162481" ,
"lon" : "116.401006456" ,
"city" : "北京市" ,
"w_name" : "晴" ,
"temp" : "-2-10" ,
"two" : "12-8 -4-5"
}
序号 参数名称 说明 1 lat 纬度 2 lon 经度 3 city 城市名称 4 w_name 天气说明 5 temp 气温 6 two 明日天气
3、省会天气实况展示 这里以 12 月 7 日为例，使用上述程序查询出来 12 月 7 日到 12 月 8 日两天的省会城市天气预报数据如下：
[ { "lat" : "39.903162481" , "lon" : "116.401006456" , "city" : "北京市" , "w_name" : "晴" , "temp" : "-2-10" , "two" : "12-8 -4-5" } , { "lat" : "39.083383854" , "lon" : "117.193764008" , "city" : "天津市" , "w_name" : "晴" , "temp" : "-2-11" , "two" : "12-8 -2-5" } , ... ]
三、WebGIS 应用构建 本节将重点介绍如何在 WebGIS 中进行应用的构建，在使用百度天气创建好相应的省会城市列表的天气信息后，接下来要做的就是要集成经典的天气预报北京音乐，同时使用 Leaflet 来标注所有的省会城市位置，并且要展示天气信息，最后要根据位置来实现城市的轮播展示。
1、背景音乐集成 背景音乐这里我们找了一个很经典的，是我们小时候百听不厌的背景音乐。当然，大家也可以根据自己的喜好来调整。在 html 中增加一个在线视频，然后需要我们隐藏画面，只保留音乐，核心代码如下：
<video loop muted >
<source src ="./weather/music.mp4" type ="video/mp4" >
您的浏览器不支持 HTML5 视频。
</video >
为了隐藏画面，这里我们使用 CSS 样式的方式进行控制，代码如下：
为了演示的效果，我们将设置网页进行延迟播放，设置方法如下：
var video = document .getElementById ('backgroundVideo' );
video.volume = 0.2 ;
var button = document .getElementById ('playButton' );
window .onload = function (initWeather ();
setTimeout (function (play ();
video.muted = false ;
preview ();
}, 5000 );
};
2、城市标记及天气展示 城市标记及天气展示比较简单，使用 Leaflet 来进行位置的标注即可，这里给出示例代码：
function initWeather (var collisionLayer = L.LayerGroup .collision ({margin :3 });
for (var i=0 ;i<dataJson.length ;i++){
var html;
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 + " " + dataJson.w_name + " " + 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 (const intervalId = setInterval (() => {
if (currentIndex >= dataJson.length ) {
currentIndex = 0 ;
}
const currentElement = dataJson[currentIndex];
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 );
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、成果展示 经过以上的步骤，基本就可以实现带音乐播放的天气小应用。页面效果如下：
四、总结 以上就是本文的主要内容，本文构建了一个能够唤醒 80 年代记忆的老式天气预报系统。这不仅仅是一个技术项目，更是一次情感的探索和文化的传承。通过构建这样一个 80 年代风格的天气预报系统，我们希望能够唤起更多人对那个时代的美好回忆，同时也展示现代技术在文化传承方面的巨大潜力。在未来的工作中，我们还将继续优化系统功能，增加更多互动元素，如用户自定义播报内容、分享功能等，让这个系统不仅仅是一个展示平台，更是一个能够与用户产生情感共鸣的互动空间。这是一次穿越时空的构建之旅，也是一次对过去的致敬和对未来的探索。让我们一起踏上这段旅程，用现代的技术手段，唤醒那些沉睡在记忆深处的 80 年代天气预报，让旧时光在新技术的助力下重新焕发生机。
相关免费在线工具 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
