基于SpringBoot和Leaflet集成在线天气服务的区县当前天气WebGIS实战
目录
前言? ? ??
一、需求描述
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}\")@ResponseBodypublic AjaxResult weatherData(@PathVariable(\"id\") Long id) {Area area = areaService.getById(id);HttpResponse 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网页，用于展示天气实时信息，代码如下：
天气实况数据 生活指数 指数概要 指数说明
接下来就是将通过接口返回的数据调用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。
数据更新时间:\" + now.uptime + \"\"; $(\"#nowInfo\").html(wInfo); var indexDataInfo = \"\"; for(var i = 0 ;i<weatherData.result.indexes.length;i++){ var _idxData = weatherData.result.indexes[i]; indexDataInfo += \"\" + _idxData.name + \" \" + _idxData.brief + \" \" + _idxData.detail + \" 以上就是使用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开发中的应用方法，还能够深入理解如何将天气数据与地理信息进行有效结合，为后续开发类似的地理信息应用奠定坚实的基础。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
