前言

一、需求描述

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开发中的应用方法，还能够深入理解如何将天气数据与地理信息进行有效结合，为后续开发类似的地理信息应用奠定坚实的基础。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。