基于SpringBoot和Leaflet集成在线天气服务的区县当前天气WebGIS实战

发布于:2025-07-07 ⋅ 阅读:(26) ⋅ 点赞:(0)

目录

前言      

一、需求描述

1、功能需求

2、技术实现流程

二、SpringBoot后台实现

1、控制层实现

2、区县数据返回

三、WebGIS前端实现

1、区位信息展示

 2、天气信息展示

四、成果展示

1、魔都上海

2、蜀地成都

3、湖南桂东

五、总结


前言      

        在当今数字化时代,地理信息系统(WebGIS)作为一种强大的空间信息展示与分析工具,已经广泛应用于各个领域。它不仅能够直观地呈现地理数据,还能结合实时信息为用户提供更加丰富和动态的体验。天气信息作为与人们日常生活息息相关的重要数据,其与WebGIS的结合更是具有巨大的应用价值。本文将深入探讨如何基于SpringBoot框架和Leaflet库,集成在线天气服务,构建一个展示区县当前天气的WebGIS系统,旨在通过实战案例为相关开发者提供参考和借鉴。

        随着互联网技术的飞速发展,人们对信息的获取和交互方式提出了更高的要求。传统的天气预报服务虽然已经能够提供较为准确的天气信息,但其展示形式往往较为单一,缺乏直观性和交互性。而WebGIS技术的出现,为天气信息的展示带来了新的思路和方法。通过将天气数据与地理信息相结合,用户可以在地图上直观地查看不同地区的天气情况,并且能够根据自己的需求进行交互操作,如放大、缩小、查询特定区域的天气等。这种结合不仅提高了天气信息的可用性,也为用户带来了更加便捷和个性化的体验。

        在本实战项目中,我们将详细介绍如何利用SpringBoot和Leaflet集成在线天气服务,实现区县当前天气的展示。我们将从系统需求分析、技术选型、后端开发、前端设计以及系统的测试与优化等多个方面进行阐述,逐步引导读者完成整个系统的开发过程。通过本项目的实践,读者不仅能够掌握SpringBoot和Leaflet在WebGIS开发中的应用方法,还能够深入理解如何将天气数据与地理信息进行有效结合,为后续开发类似的地理信息应用奠定坚实的基础。让我们一起踏上这场WebGIS与天气服务融合的实战之旅,探索其中的技术奥秘和应用价值。

一、需求描述

        区县作为我国行政区划的基本单位,在气象服务方面具有重要的意义。不同区县的地理环境、气候特点各异,对于天气信息的需求也各不相同。因此,构建一个能够展示区县当前天气的WebGIS系统,不仅能够满足公众对于本地天气的关注,还能够为政府部门、企业等提供决策支持,例如在灾害天气预警、农业生产规划、交通管理等方面发挥重要作用。通过对区县天气数据的实时监测和分析,可以更好地了解天气变化趋势,提前采取相应的措施,减少天气对人们生活和经济活动的影响。 

1、功能需求

        支持在地图上对区县区域范围进行展示,同时在Web界面上对天气实况和生活指数。需要提供全国区县的列表展示,支持按照区县名称进行模糊查询。在之前的博文中,我们对如何使用百度天气进行查询,但是没有一个可展示的Web界面对返回成果进行展示。

2、技术实现流程

        如上图是一个简单的基于百度天气的在线查询案例,PostGIS获取区县Geometry完全基于本地离线仓库实现查询。天气查询接口需要依赖百度的天气接口,因此需要网络环境支持,如果服务不支持联网,那么需要考虑其它的构建方式,比如使用单向网闸进行数据单向导入等。 

二、SpringBoot后台实现

        SpringBoot作为当前流行的Java开发框架,以其简洁的配置和强大的功能得到了广大开发者的青睐。它能够快速搭建起一个稳定、高效的后端服务,为WebGIS系统的开发提供了坚实的基础。通过SpringBoot,我们可以方便地集成各种第三方服务和库,实现天气数据的获取、处理和存储等功能。同时,SpringBoot的微服务架构也使得系统的扩展性和可维护性得到了极大的提升,能够更好地应对复杂的业务需求和高并发的访问场景。本节将重点介绍如何使用SpringBoot来进行后端的PostGIS数据范围查询和天气查询服务。

1、控制层实现

        为了演示集成使用,这里不做特别复杂的转换也封装,也不对后台接口返回的数据进行再次包装,将原始数据进行展示。直接在SpringBoot中的Controller中进行直接调用。核心方法如下:

/**
* - 跳转区县天气
* @return
*/
@RequiresPermissions("eq:weather:view")
@GetMapping("/weather/{id}")
public String weather(@PathVariable("id") Long id,ModelMap mmap) {
	mmap.put("areaId", id);
	return prefix + "/weather";
}
	
@RequiresPermissions("eq:weather:data")
@PostMapping("/weather/{id}")
@ResponseBody
public AjaxResult weatherData(@PathVariable("id") Long id) {
	Area area = areaService.getById(id);
	HttpResponse<String> result = baiduWeatherServcie.getWeather(String.valueOf(area.getAreaCode()), "all", BAIDU_CLIENT_AK);
	return AjaxResult.success().put("data", result.getBodyToString());
}

2、区县数据返回

        再来看一下从后台请求百度天气接口的数据返回示例,如下:

        在百度的天气接口中直接返回的数据包含当前实时天气、生活指数、位置信息、未来24小时天气、未来一周(七天)的天气等。将数据返回给前端以后,后续就可以基于Leaflet来进行相关信息的展示。 将在下一节中进行重点介绍。

三、WebGIS前端实现

        Leaflet是一个轻量级的开源JavaScript库,专门用于开发交互式地图应用。它具有简洁的API、高效的性能和良好的兼容性,能够轻松地在网页中嵌入地图,并实现地图的基本操作,如缩放、平移、标记等。Leaflet还提供了丰富的插件支持,可以方便地扩展地图的功能,如添加天气图层、绘制地理要素等。通过与SpringBoot的结合,Leaflet可以作为前端展示的核心工具,将后端获取的天气数据以直观的方式呈现在地图上,为用户提供良好的视觉体验。本节将重点介绍如何使用Leaflet来对区县区域范围以及区县的天气信息进行展示。

1、区位信息展示

        主要使用Leaflet对区县的行政区域范围Geometry进行展示,在后台使用SpringBoot调用PostGIS调取空间数据表信息,将结果以Geojson的形式进行返回。获取Geojson的方法在之前的系列博文中均有所介绍,在此不再进行赘述。这里介绍如何在Leaflet中进行区位信息展示。

function previewArea(gid,name){
	  var myStyle = {color:"red",weight:5,"opacity":0.6};
	  $.ajax({  
		  type:"get",  
		  url:prefix + "/geojson/" + gid,  
		  data:{},  
		  dataType:"json",  
		  cache:false,
		  processData:false,
		  success:function(result){
		     if(result.code == web_status.SUCCESS){
		        var areaLayer = L.geoJSON(JSON.parse(result.data),{style:myStyle}).addTo(mymap);
		        var myIcon = L.divIcon({
		        	  className: 'my-div-icon',
		        	  iconSize: 100
		        });
		        		
		        showLayerGroup.clearLayers();
		        showLayerGroup.addLayer(areaLayer);
		        mymap.fitBounds(areaLayer.getBounds());
		        //中心点位
		        L.marker(areaLayer.getBounds().getCenter(), { icon: myIcon}).addTo(showLayerGroup);
		   }
		 },
		 error:function(){
		      $.modal.alertWarning("获取空间信息失败");
		 }
	});
}

 2、天气信息展示

        为了展示方便,在地图界面上左边展示区县行政范围,在右边展示实时天气信息和生活指数信息。而天气信息和生活指数信息通过调用第三方接口进行获取。在这里需要通过接口对数据进行准换,将数据回写到页面中。首先在页面中定义以下html网页,用于展示天气实时信息,代码如下:

<div class="ibox" style="overflow: auto;">
	<div class="panel panel-primary">
	     <div class="panel-heading">
	           <span id="location"></span>&nbsp;&nbsp;天气实况数据
	     </div>
	     <div class="panel-body">
	           <p id="nowInfo"></p>
	     </div>
	 </div>
     <table class="table table-bordered white-bg" >
          <thead>
                <tr>
                    <th>生活指数</th>
                    <th>指数概要</th>
                    <th width="60%">指数说明</th>
                 </tr>
          </thead>
          <tbody id="indexData">
          </tbody>
      </table>
</div>

        接下来就是将通过接口返回的数据调用DOM绑定到页面上,如下图所示:

function showWeather(){
        	    $.ajax({  
		        type:"post",  
		        url:prefix + "/weather/" + [[${areaId + ''}]],  
		        dataType:"json",  
		        cache:false,
		        processData:false,
		        success:function(result){
		        	if(result.code == web_status.SUCCESS){
		        		debugger;
		        		console.log(result.data);
		        		var weatherData = JSON.parse(result.data);
		        		var location = weatherData.result.location;
		        		var locData = location.province+"," + location.city + "," + location.name;
		        		$("#location").html(locData);
		        		var now = weatherData.result.now;
		        		var wInfo = now.text +";气温:" + now.temp + "(℃),体感温度:" +now.feels_like + ",相对湿度:" + now.rh ;
		        		wInfo += "%," +now.wind_dir + now.wind_class + ",云量:" + now.clouds + "%,1小时累计降水量(mm):" + now.prec_1h + ",能见度"+ now.vis + "米。";
		        		wInfo += "空气质量指数:" + now.aqi + ",pm2.5浓度:" + now.pm25 + "μg/m3,pm10浓度:" + now.pm10 + "μg/m3,";
		        		wInfo += "二氧化氮浓度:"+now.no2 + "μg/m3,二氧化硫浓度:" + now.so2 + "μg/m3,臭氧浓度:" + now.o3+ "μg/m3," ;
		        		wInfo += "一氧化碳浓度:" + "μg/m3。<hr/><span style='float:right;'>数据更新时间:" + now.uptime + "</font>"; 
		        		$("#nowInfo").html(wInfo);
		        		
		        		var indexDataInfo = "";
		        		for(var i = 0 ;i<weatherData.result.indexes.length;i++){
		        			var _idxData = weatherData.result.indexes[i];
		        			indexDataInfo += "<tr><td>" + _idxData.name + "</td><td>" + _idxData.brief + "</td><td>" + _idxData.detail + "</td></tr>";
		        		}
		        		$("#indexData").html(indexDataInfo);
		        	}
		        },
		        error:function(){
		        	$.modal.alertWarning("获取信息失败");
		        }
		    });
        }

        以上就是使用Leaflet对区县城市信息进行WebGIS前端展示的实现。最后我们来看一下实际效果。

四、成果展示

        本节对相关区县的天气实况进行展示,篇幅有限不能逐一展开,这里选取一些城市作为实例。如有关注的重点城市也可以私聊。

1、魔都上海

        上海市,上海市,长宁区  天气实况数据:晴;气温:35(℃),体感温度:38,相对湿度:55%,东风1级,云量:0%,1小时累计降水量(mm):0,能见度27600米。空气质量指数:35,pm2.5浓度:14μg/m3,pm10浓度:24μg/m3,二氧化氮浓度:15μg/m3,二氧化硫浓度:5μg/m3,臭氧浓度:109μg/m3,一氧化碳浓度:μg/m3。 

        不得不说,上海的天气也是比较热辣的。

2、蜀地成都

        四川省,成都市,双流  天气实况数据:阴;气温:26(℃),体感温度:28,相对湿度:77%,北风1级,云量:95%,1小时累计降水量(mm):0,能见度18700米。空气质量指数:36,pm2.5浓度:16μg/m3,pm10浓度:36μg/m3,二氧化氮浓度:21μg/m3,二氧化硫浓度:6μg/m3,臭氧浓度:49μg/m3,一氧化碳浓度:μg/m3。 

        天府之国,天气还是比较舒服的。 

3、湖南桂东

        暑假来临,湖南全省气温每天都是热辣滚烫,郴州桂东绝对还是不错的。在众多的38度39当中属于比较凉爽的存在了。

        湖南省,郴州市,桂东  天气实况数据:晴;气温:30(℃),体感温度:32,相对湿度:51%,西北风2级,云量:14%,1小时累计降水量(mm):0,能见度6900米。空气质量指数:35,pm2.5浓度:19μg/m3,pm10浓度:35μg/m3,二氧化氮浓度:8μg/m3,二氧化硫浓度:39μg/m3,臭氧浓度:82μg/m3,一氧化碳浓度:μg/m3。 

        整体来说,比成都稍微热一点,但是在湖南省内还是比较凉爽的。不知道您当前所在是哪个城市?天气温度又如何呢? 欢迎留言交流。

五、总结

        以上就是本文的主要内容,在本实战项目中,我们将详细介绍如何利用SpringBoot和Leaflet集成在线天气服务,实现区县当前天气的展示。我们将从系统需求分析、技术选型、后端开发、前端设计以及系统的测试与优化等多个方面进行阐述,逐步引导读者完成整个系统的开发过程。通过本项目的实践,读者不仅能够掌握SpringBoot和Leaflet在WebGIS开发中的应用方法,还能够深入理解如何将天气数据与地理信息进行有效结合,为后续开发类似的地理信息应用奠定坚实的基础。行文仓促,定有不足之处,欢迎各位朋友在评论区批评指正,不胜感激。


网站公告

今日签到

点亮在社区的每一天
去签到