基于Leaflet和天地圖的免費運動場所WebGIS可視化-以長沙市為例

前言

一、免費運動場所數據整理

1、本地寶數據簡介

2、Java后臺數據解析

二、Leaflet前端地圖展示

1、基礎數據準備

2、具體位置及屬性標記

三、成果展示

1、空間位置分布

2、東風路立交橋運動公園

3、芙蓉區花侯路瀏陽河大橋下方

4、梅嶺國際小區

5、湖南大學附屬中學對面

6、湘府路大橋西

7、靜園山莊

四、總結

前言

????????在當今快節奏的現代生活中，人們對于健康生活方式的追求愈發強烈，運動健身成為眾多市民日常生活的重要組成部分。長沙市作為湖南省的省會城市，擁有眾多的運動場所，從專業的體育場館到社區內的小型健身場地，種類豐富。然而，對于廣大市民而言，如何快速、便捷地找到身邊的免費運動場所，以及了解這些場所的相關信息，如位置、設施、開放時間等，一直是一個難題。WebGIS（Web 地理信息系統）技術的出現和發展，為解決這一問題提供了新的思路和方法。它通過將地理信息與網絡技術相結合，實現了地理空間數據的在線發布、查詢、分析和可視化等功能，為用戶提供了一個直觀、便捷的地理信息獲取平臺。在眾多的 WebGIS 開發框架中，Leaflet 以其輕量級、易上手、功能強大等特點，受到了廣大開發者的青睞。Leaflet 能夠方便地與各種地圖服務進行集成，實現地圖的顯示、縮放、平移等基本操作，同時還可以通過插件擴展其功能，如添加標記、繪制圖形、進行空間分析等。而天地圖作為我國自主研發的地理信息服務平臺，提供了豐富的地理空間數據資源，包括矢量地圖、影像地圖、地形地貌等，其數據精度高、覆蓋范圍廣，能夠為 WebGIS 應用提供堅實的數據基礎。

????????本研究旨在基于 Leaflet 和天地圖，構建一個長沙市免費運動場所的 WebGIS 可視化平臺。通過對長沙市免費運動場所的實地調研和數據收集，整合其位置、類型、設施、開放時間等信息，利用 Leaflet 的地圖功能和天地圖的數據資源，實現這些運動場所的可視化展示。用戶可以通過該平臺，在地圖上直觀地查看長沙市各個免費運動場所的分布情況，點擊感興趣的場所圖標，獲取詳細的場所信息，還可以通過搜索功能快速定位到特定的運動場所。本案例具有一定的現實意義，能夠為長沙市市民提供一個便捷的免費運動場所查詢平臺，提高市民的運動參與度和生活質量。通過對 Leaflet 和天地圖的深入應用和研究，進一步推動了 WebGIS 技術的發展和創新，為未來更多類似應用的開發提供了參考和借鑒。

? ? ? ? 本文搜集的免費運動場所地點由長沙本地寶提供，參考內容中不包含有經緯度信息。我根據提供的中文地址調用天地圖的地名解析服務，將地名轉換成對應的經緯度位置，因此非常感謝本地寶的基礎數據，我只是在此基礎上進行了空間位置的映射，更加方便大家查找相關的位置。博文首先介紹了如何使用天地圖服務根據提供的免費運動場所進行解析，然后根據解析的結果使用Lealet組件來進行WebGIS展示，為大家提供服務展示。

一、免費運動場所數據整理

????????本節將重點介紹一下基礎數據以及在Java后臺來構建場所查詢地點。為后續的空間展示打下基礎。

1、本地寶數據簡介

????????首先需要介紹一下基礎的數據來源，本次搜集整理的免費數據源來源于長沙本地寶分享，不花錢也能打球~長沙免費運動場地推薦！。

每次想運動運動，都要開始到處找場地。收費？不要。其實長沙有很多很多的免費的運動場地哦！

籃球、羽毛球、排球、乒乓球……

????????在文章中我們梳理出來了主要的運動場所的位置描述信息。如下表格所示：

序號	所屬范圍	位置信息
1	開福區東風路立交橋	東風路與三一大道交會處
2	芙蓉區花侯路瀏陽河大橋	芙蓉區花侯路瀏陽河大橋下方
3	梅溪湖街道梅園社區	導航梅嶺國際小區南門，進門左拐進入小區，在8棟后面
4	湖南大學附屬中學對面	湖南大學附屬中學對面，聯豐路橋下
5	洋湖街道	湘府路大橋西附近
6	天頂街道天源社區、雷鋒大道	導航靜園山莊，進門左拐，或者導航科迪雅靜園幼兒園

2、Java后臺數據解析

????????為了防止查詢的地名地址在全國的區域內有重名的情況，這里在一些地名上加上長沙作為前綴。如：“靜園山莊”加上限定詞“長沙雷鋒大道靜園山莊”，以上6個地方的限定詞加上后完整的查詢天地圖Java示例程序如下所示：

@Test
public void testGeocoder2() throws InterruptedException {String [] loc_name = {"東風路立交橋運動公園","芙蓉區花侯路瀏陽河大橋下方","梅嶺國際小區","湖南大學附屬中學對面","長沙湘府路大橋西","長沙雷鋒大道靜園山莊"};for(String name : loc_name) {String keyWord = "%7B'keyWord':'" + name + "'%7D" ;HttpResponse<String> resp = tdtOptService.getGeocoder(keyWord, TDT_SERVER_KEY);System.out.println(name + "===>" +resp.getBodyResult());Thread.sleep(1500);}
}

????????在開發IDE中運行以上的測試用例，在IDE的控制臺可以發現以下輸出：

????????說明我們成功的調用天地圖的API實現地名的解析并返回了相應的值。

二、Leaflet前端地圖展示

????????本節將重點介紹如何使用Leaflet來對這些免費的運動場所進行WebGIS展示。想要把這些數據展示出來需要經過以下兩步。第一步是根據后臺的返回準備基礎數據，第二步是在地圖上展示具體的位置及屬性。

1、基礎數據準備

????????這里將根據后臺返回的基礎數據，組裝成我們需要的時空數據和屬性數據。完整的數據如下，在每一條數據中，包含了經緯度位置、運動場所名稱、所屬范圍和適宜的運動：

// 待標繪的點
var dataJson = [{lat:28.232727,lon:112.987638,c_name:"東風路立交橋運動公園",range:"開福區東風路立交橋",traffic:"可乘坐公交到達附近站點，如東風路站等，<br/>下車后步行前往；若選擇自駕，周邊有相應道路可抵達，<br/>且公園周邊有一定停車區域。",color:"#03a9f4",sports:"包括三個半場籃球場 ，兩片多功能運動場（氣排球場），<br/>兩片標準羽毛球場。一個兒童活動區和一塊廣場舞場地，<br/>健身、遛娃兩相宜。"},{lat:28.212437,lon:113.034959,c_name:"芙蓉區花侯路瀏陽河大橋下方",range:"芙蓉區花侯路瀏陽河大橋",traffic:"乘坐公交可選擇靠近瀏陽河大橋的站點下車，<br/>再步行前往；自駕可通過花侯路等道路抵達，<br/>周邊停車較為方便。",color:"#ff9800",sports:"不僅設置了體育健身場地，還保留了附近居民比賽存放的龍舟。<br/>單獨開辟了龍舟文化展示區，讓居民在運動的同時，<br/>還能感受龍舟文化的魅力。"},{lat:28.195517,lon:112.875721,c_name:"梅嶺國際小區",range:"梅溪湖街道梅園社區",traffic:"地鐵2號線梅溪湖西4號口步行到達，<br/>也可以乘坐公交到梅嶺公園或看云路采菊路口下",color:"#591ee9",sports:"運動場地較其他小區來說要大，有三片羽毛球場地，<br/>管理得很好且很干凈，還專門配備了乒乓球桌，<br/>背靠幽靜的小山坡。"},{lat:28.139807,lon:112.924884,c_name:"湖南大學附屬中學對面",range:"岳麓街道、羅家嘴立交橋西南角",traffic:"地鐵3號線陽光站1號口步行到達，<br/>建議乘坐公交到聯豐路潭州大道口公交站，下車只需步行100m",color:"#607d8b",sports:"橋下空間改造而來，有三片羽毛球場地，<br/>環境很新且有好幾個乒乓球桌。"},{lat:28.11695,lon:112.9404,c_name:"湘府路大橋西",range:"洋湖街道",traffic:"乘坐公交至湘府路大橋西步行到達",color:"#4b29b5",sports:"橋下空間很全面，包含一片五人制足球場、兩片籃球場、<br/>三片羽毛球場、六張乒乓球臺。"},{lat:28.2442,lon:112.88991,c_name:"靜園山莊",range:"天頂街道天源社區、雷鋒大道",traffic:"乘坐公交到靜園站下，建議自駕",color:"#a50b0b",sports:"場地建設時是用作網球場的，但是打羽毛球也可以。<br/>邊上還有一個籃球場，地理位置稍偏，適合住雷鋒大道的人來。"}];

????????將以上的信息準備完畢后，接下來就可以基于這些位置信息在地圖上展示出來。?

2、具體位置及屬性標記

????????有了位置之后，就可以使用Leaflet來對這些具體的位置進行地圖的標記，同時在展示時將所屬范圍、適合的運動項目也進行了一個簡單的展示。關鍵代碼如下：

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 class='marsBlackPanel' style='background:"+dataJson.color+";' animation-spaceInDown><div class='marsBlackPanel-text' ><b>"+ (i+ 1)+ "、" +dataJson.range + "&nbsp;" + dataJson.c_name +"</b><span></span></div>";html += "<div class='marsBlackPanel-text' style=''>推薦交通:" + dataJson.traffic+ "</div>";html += "<div class='marsBlackPanel-text' style=''>推薦運動:" + dataJson.sports+ "</div>";html += "</div>";return html;
}

三、成果展示

????????本節將對長沙市的免費運動場地進行空間展示，也讓大家看看這6塊地方究竟在哪里。首先介紹一下整體的時空位置分布，其次將進行逐個地點的介紹。

1、空間位置分布

????????本次分享的免費運動場所一共有6處，從空間位置來看。比較靠北邊的就是靜園山莊，最東邊的應該是芙蓉區花侯路瀏陽河大橋下方，最西邊的是位于梅溪湖一期的梅嶺國際小區，最南邊的是湘府路大橋西。

2、東風路立交橋運動公園

? ? ? ?該場地包括三個半場籃球場，兩片多功能運動場（氣排球場），兩片標準羽毛球場。一個兒童活動區和一塊廣場舞場地，健身、遛娃兩相宜。?

3、芙蓉區花侯路瀏陽河大橋下方

?????????該場地不僅設置了體育健身場地，還保留了附近居民比賽存放的龍舟。單獨開辟了龍舟文化展示區，讓居民在運動的同時，還能感受龍舟文化的魅力。

4、梅嶺國際小區

????????運動場地較其他小區來說要大，有三片羽毛球場地，管理得很好且很干凈，還專門配備了乒乓球桌，背靠幽靜的小山坡。?

5、湖南大學附屬中學對面

????????橋下空間改造而來，有三片羽毛球場地，環境很新且有好幾個乒乓球桌。?

6、湘府路大橋西

????????橋下空間很全面，包含一片五人制足球場、兩片籃球場、三片羽毛球場、六張乒乓球臺。?

7、靜園山莊

????????場地建設時是用作網球場的，但是打羽毛球也可以。邊上還有一個籃球場，地理位置稍偏，適合住雷鋒大道的人來。?

四、總結

????????以上就是本文的主要內容。本文研究旨在基于 Leaflet 和天地圖，構建一個長沙市免費運動場所的 WebGIS 可視化平臺。通過對長沙市免費運動場所的實地調研和數據收集，整合其位置、類型、設施、開放時間等信息，利用 Leaflet 的地圖功能和天地圖的數據資源，實現這些運動場所的可視化展示。通過使用天地圖來展示這些運動場所信息，不僅方便了大家的瀏覽，同時還能為后面的管理提供一個入口。博文首先對免費運動場所的信息和空間信息進行介紹，其次介紹了前后端的程序如何編寫以及如何進行WebGIS的可視化分析，最后對6處免費的場所進行了詳細的介紹，從所屬的位置，適合的運動、交通方式等方面進行。行文倉促，定有不足之處，歡迎各位朋友在評論區批評指正，不勝感激。最后，希望大家都動起來，為了自己的健康，走出辦公室，走進戶外。各位小伙伴們，如果你的所在地方也有免費的地方進行運動，也可以一并告知我來統一搜集，數據可以在評論區留言留下聯系方式，萬分感謝。