基于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}")
@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開發中的應用方法，還能夠深入理解如何將天氣數據與地理信息進行有效結合，為后續開發類似的地理信息應用奠定堅實的基礎。行文倉促，定有不足之處，歡迎各位朋友在評論區批評指正，不勝感激。