前言
在数字化与智能化快速发展的时代，路径规划技术已成为现代交通管理、旅游服务以及城市规划等领域的核心工具之一。随着地理信息系统（GIS）技术的进步，结合 Web 开发框架和地图服务，实现路径规划的可视化已成为可能。本文旨在探讨如何利用 Leaflet 这一轻量级开源的地图 JavaScript 库，结合 Spring Boot 框架和天地图服务，构建一个高效直观的路径规划可视化系统。
本文将重点结合 Leaflet 对请求的结果进行可视化，不仅实现对规划路径的展示，同时还展示了路线中的转折点标注。使用本方案不需要自己来实现路径规划的算法，对于在系统中集成相关功能应用有较快的能力。
一、路径规划需求
1、需求背景
在旅游行业中，路径规划的可视化具有重要意义。从机场到景区的路径规划往往涉及复杂的交通网络和多样的出行方式。通过构建基于 Leaflet、Spring Boot 和天地图的路径规划可视化系统，可以为游客提供直观便捷的导航服务。系统不仅能够展示最优路径，还能实时更新路况信息，帮助游客避开拥堵路段，节省出行时间。
2、技术选型
技术实现方面，Spring Boot 框架提供了稳定高效的应用开发环境，能够快速搭建后端服务，处理用户请求和数据交互。Leaflet 则负责前端的地图展示和交互功能，通过调用天地图的 API 获取地图数据和路径规划结果。系统架构设计遵循模块化原则，将地图服务、路径规划服务和用户交互服务分离，确保系统的可扩展性和可维护性。
3、功能简述
以黄花机场到橘子洲景区为例，该路径规划可视化系统将展示从机场出发，经过主要交通节点，最终到达景区的详细路线。系统支持多种出行方式，包括驾车、公交和步行，并根据用户选择的出行方式动态调整路径规划结果。同时，系统还提供路径长度、预计行驶时间等关键信息，并以直观的图形化方式展示在地图上。
二、Leaflet 前端可视化
本节将重点讲解如何使用 Leaflet 来实现对路径规划的结果进行展示。首先介绍内容布局，然后介绍规划路径的 Web 可视化，最后介绍如何对转折路线的展示。
1、内容布局
参考一般的导航软件，路径规划的结果一般会包含以下的主要信息：路线信息、重要的转折点展示、重点路段的信息说明。在展示的时候分为左右结构。
2、路线展示
首先使用 Leaflet 对天地图接口返回的路线信息进行综合展示。打开访问接口，在网络请求中查看返回数据，接口返回如下：
在返回结果中，routelatlon 字段表示具体的规划路径，这表示连续的坐标点，每个坐标点使用分号隔开，经纬度之间用逗号分隔。因此在解析时，首先需要将字符串按照分号分隔，然后将坐标点添加到一个数组中。关键代码如下：
var routingArray = new Array();
var routelatlonStr = result.data.routelatlon;
routelatlonStrArray = routelatlonStr.();
( i = ;i<routelatlonStrArray.;i++){
_tempStr = routelatlonStrArray[i];
(_tempStr == ) ;
routingArray.([_tempStr.()[],_tempStr.()[]]);
}
L.([routingArray],{: }).(showBaseGroup);
