目錄

前言

一、路徑規劃需求

1、需求背景

2、技術選型

3、功能簡述

二、Leaflet前端可視化

1、內容布局

2、路線展示

3、轉折路線展示

三、總結

---

前言

????????在當今數字化與智能化快速發展的時代，路徑規劃技術已經成為現代交通管理、旅游服務以及城市規劃等領域的核心工具之一。無論是日常通勤、商務出行還是旅游觀光，高效、準確的路徑規劃都能顯著提升人們的出行體驗，優化資源配置，減少時間浪費和能源消耗。隨著地理信息系統（GIS）技術的不斷進步，結合先進的Web開發框架和地圖服務，實現路徑規劃的可視化已經成為可能。本文旨在探討如何利用Leaflet這一輕量級、開源的地圖JavaScript庫，結合Spring Boot框架和天地圖服務，構建一個高效、直觀的路徑規劃可視化系統，并以黃花機場到橘子洲景區為例，展示該技術在實際場景中的應用價值。

????????在之前的系列博客中，我們曾將介紹了天地圖的相關開發資源，也介紹了如何在后臺利用Unihttp來進行天地圖的服務調用，如何將天地圖返回的xml信息快速轉換成json對象，但是我們仍然缺乏對轉換的JSON數據進行Web可視化。前文鏈接如下：

序號	博文地址
1	在SpringBoot中基于JAXB實現天地圖路徑規劃結果XML轉JSON實踐
2	在SpringBoot中使用UniHttp簡化天地圖路徑規劃調用實踐

?????????本文將重點結合Leaflet對請求的結果進行可視化，不僅實現對規劃的路徑的展示，同時還展示了路線中的轉折點進行標注的全面的展示。使用本方案不需要自己來實現路徑規劃的算法，對于在系統中集成相關的功能應用有較快的能力。

一、路徑規劃需求

????????路徑規劃技術的演進歷程見證了從傳統的紙質地圖導航到數字化地圖的轉變。早期的路徑規劃依賴于復雜的算法和龐大的計算資源，普通用戶難以直接獲取和使用。然而，隨著互聯網技術的普及和云計算的興起，路徑規劃逐漸走向大眾化和實用化。天地圖作為國內領先的地理信息服務平臺，提供了豐富的地圖數據和強大的API接口，為開發者提供了強大的支持。而Spring Boot框架以其簡潔、高效的特性，成為構建企業級應用的首選。Leaflet作為一款輕量級的地圖庫，以其易用性和高性能，成為Web開發中地圖可視化的理想選擇。

1、需求背景

????????在旅游行業中，路徑規劃的可視化具有重要意義。黃花機場作為長沙的重要交通樞紐，每年接待大量國內外游客。橘子洲景區作為長沙的標志性景點，吸引著無數游客前來觀光。然而，從機場到景區的路徑規劃往往涉及復雜的交通網絡和多樣的出行方式，游客在初次到達時可能會感到迷茫。通過構建一個基于Leaflet、Spring Boot和天地圖的路徑規劃可視化系統，可以為游客提供直觀、便捷的導航服務。系統不僅能夠展示最優路徑，還能實時更新路況信息，幫助游客避開擁堵路段，節省出行時間。同時，結合天地圖的POI（興趣點）數據，系統還能為游客推薦沿途的餐飲、住宿等服務，提升整體旅游體驗。

2、技術選型

????????技術實現方面，Spring Boot框架提供了穩定、高效的應用開發環境，能夠快速搭建后端服務，處理用戶請求和數據交互。Leaflet則負責前端的地圖展示和交互功能，通過調用天地圖的API獲取地圖數據和路徑規劃結果。在路徑規劃算法上，可以采用經典的Dijkstra算法或A*算法，結合天地圖的實時路況數據，計算出最優路徑。系統架構設計遵循模塊化原則，將地圖服務、路徑規劃服務和用戶交互服務分離，確保系統的可擴展性和可維護性。

3、功能簡述

????????以黃花機場到橘子洲景區為例，該路徑規劃可視化系統將展示從機場出發，經過主要交通節點，最終到達景區的詳細路線。系統支持多種出行方式，包括駕車、公交和步行，并根據用戶選擇的出行方式動態調整路徑規劃結果。同時，系統還提供路徑長度、預計行駛時間等關鍵信息，并以直觀的圖形化方式展示在地圖上。用戶可以通過縮放、平移等操作查看路徑細節，還可以點擊查看沿途的POI信息，獲取更多實用建議。

二、Leaflet前端可視化

????????本節將重點講解如何使用Leaflet來實現對路徑規劃的結果進行展示，后臺的實現可以翻閱之前的示例代碼。首先介紹內容布局，然后介紹規劃路徑的Web可視化，最后介紹如何對轉折路線的展示。

1、內容布局

????????首先來介紹一下頁面的內容布局，參考一般的導航軟件，可以看到對于路徑規劃的結果一般會包含以下的主要信息。首先會包含路線信息，其次會將重要的轉折點進行展示，再者還有對重點路段的信息進行說明，幫助在進行行進時有指向性提示，在展示的時候分為左右結構。如下圖所示：

????????因此下面將著重從以下兩個方面的實現來進行展示。?

2、路線展示

首先使用Leaflet對天地圖接口返回的路線信息進行綜合展示，打開訪問接口，在網絡請求中查看返數據，接口返回如下：

????????在返回結果中，routelatlon字段表示具體的規劃路徑，這表示連續的坐標點，每個坐標點使用分號隔開，經緯度之間用逗號分隔。因此在解析時，首先實現需要將字符串按照表示分隔，然后將坐標點添加到一個數組中。關鍵代碼如下：

var routingArray = new Array();
var routelatlonStr = result.data.routelatlon;		        		
var routelatlonStrArray = routelatlonStr.split(";");
for(var i = 0;i<routelatlonStrArray.length;i++){var _tempStr = routelatlonStrArray[i];if(_tempStr == "") continue;routingArray.push([_tempStr.split(",")[1],_tempStr.split(",")[0]]);
}
L.polyline([ [routingArray]],{color: '#1890ff'}).addTo(showBaseGroup);

?????????為了方便的展示起始點位置，需要自定義兩個mark，分開采用兩個自定義的icon圖片來進行圖片的綁定，關鍵代碼如下：

//開始圖標
var startIcon = L.icon({iconUrl: ctx + '/img/start_point_48.png',iconSize: [40, 40], // 設置圖片大小 寬度32.高度32iconAnchor: [25, 35]
});	
//結束圖標
var endIcon = L.icon({iconUrl: ctx + '/img/end_point_48.png',iconSize: [40, 40], // 設置圖片大小 寬度32.高度32iconAnchor: [12, 10]
});
//添加起點
L.marker(new L.latLng(result.data.orig.split(",")[1],result.data.orig.split(",")[0]), {icon: startIcon}).addTo(showBaseGroup);
//添加終點
L.marker(new L.latLng(result.data.dest.split(",")[1],result.data.dest.split(",")[0]), {icon: endIcon}).addTo(showBaseGroup);

????????這樣添加了路線之后，就可以在路線的起止位置展示不同的起始點位置信息。效果如下所示：

3、轉折路線展示

????????最后在頁面的左邊需要顯示這條路線的分支路線信息，這里采用原生html動態拼接實現方式，循環數據，然后東通過Jquery來實現動態元素的創建，代碼如下：

var index = 0;
for(var i=0;i < result.data.routes.items.length;i++){var dataInfo = result.data.routes.items[i];var _li = "<li class='info-element'>";_li += dataInfo.strguide;_li += "<div class='agile-detail'>"_li += "<a href='#' class='pull-right btn btn-xs btn-white'>標記</a>";_li += "<i class='fa fa-clock-o'></i> 行駛15分鐘";_li += "</div>";_li += "</li>";$("#routing_ul").append(_li);
}

????????使用動態拼接生成之后，頁面效果如下：

? ? ? ? 這就是路徑規劃結果的WebGIS可視化。通過本實例，大家都可以掌握如何對天地圖的路徑規劃結果進行可視化展示，同時展示不同的路段的基本信息。?

三、總結

????????以上就是本文的主要內容，本文旨在探討如何利用Leaflet這一輕量級、開源的地圖JavaScript庫，結合Spring Boot框架和天地圖服務，構建一個高效、直觀的路徑規劃可視化系統，并以黃花機場到橘子洲景區為例，展示該技術在實際場景中的應用價值。總之，本研究不僅具有重要的理論意義，還具有廣泛的實際應用價值。通過結合Leaflet、Spring Boot和天地圖，構建一個高效、直觀的路徑規劃可視化系統，可以為旅游行業提供技術支持，為游客提供便捷服務，同時也為城市交通管理和規劃提供參考。隨著技術的不斷發展和完善，路徑規劃可視化系統將在更多領域發揮重要作用，為人們的出行和生活帶來更大的便利。行文倉促，難免有許多不足之處，如有不足，在此懇請各位專家博主在評論區不吝留言指出，不勝感激。