Spring Boot携手Leaflet：开启省域迂回可视化实战之旅

夜郎king2025-08-21 14:32

目录

前言

一、空间数据基础

1、相关空间表

2、空间数据查询

二、SpringBoot后端实现

1、模型层实现

2、控制层实现

三、Leaflet前端实现

1、迂回系数设置及色带配置

2、区县迂回展示

四、成果展示

1、全国迂回整体情况

2、重庆市迂回展示

3、广东省迂回展示

4、浙江省迂回展示

五、总结

前言

在当今数字化与信息化飞速发展的时代，地理空间数据的可视化已成为众多领域不可或缺的重要工具。从城市规划到交通管理，从资源调配到环境保护，直观呈现地理信息的能力对于提升决策效率、优化资源配置以及改善公共服务质量都有着极为重要的意义。省域迂回可视化，作为一种能够精准呈现区域内复杂路径与动态变化的可视化技术，更是有着极为广阔的应用前景。它不仅可以帮助相关部门更好地规划交通网络、优化物流配送路线，还能为旅游规划、灾害应急救援等提供有力支持。省域迂回可视化技术的建设具有极其重要的意义。从交通领域来看，随着经济的快速发展和城市化进程的加速，交通拥堵问题日益严重，物流运输成本不断攀升。通过省域迂回可视化，我们可以清晰地看到交通流量的分布情况，分析出交通拥堵的节点，从而为交通规划部门提供科学合理的决策依据，优化交通网络布局，缓解交通压力。同时，对于物流企业而言，可视化技术能够帮助他们规划出更加高效的配送路线，减少运输时间和成本，提高物流效率。在旅游行业，游客对于个性化旅游体验的需求越来越高。省域迂回可视化可以根据游客的兴趣点和时间安排，为其提供最佳的旅游路线规划，让游客能够更加便捷地游览各个景点，提升旅游体验。此外，在城市规划中，可视化工具能够帮助决策者更好地理解城市交通流量、基础设施布局以及人口分布等情况，从而制定更加科学合理的规划方案，推动城市的可持续发展。在灾害应急救援方面，时间就是生命。省域迂回可视化可以快速生成救援路线，帮助救援队伍避开拥堵路段，以最短的时间到达受灾现场，提高救援效率，减少灾害损失。

在本次实战之旅中，我们将从项目的需求分析入手，深入探讨省域迂回可视化的具体应用场景和业务需求。然后，我们将详细规划系统的设计，包括后端服务的搭建、数据库的设计以及前端页面的布局等。在后端开发过程中，我们将利用Spring Boot的强大功能，实现数据的获取、处理和存储，同时提供高效的API接口供前端调用。在前端开发中，我们将借助Leaflet库，实现地图的加载、路径的可视化绘制以及各种交互功能的开发。我们还将重点研究如何优化系统的性能，提高数据处理效率，确保系统在面对大量用户访问和复杂数据时能够稳定运行。

通过本次实战，我们不仅能够深入学习Spring Boot和Leaflet的开发技巧，还能将所学知识应用到实际项目中，解决实际问题，提升自己的技术水平和实践能力。同时，我们也期待这个省域迂回可视化系统能够在实际应用中发挥重要作用，为相关领域的发展提供有力支持，为社会创造更多价值。

一、空间数据基础

本节我们对相关的空间数据基础做一个简单的介绍，本博客的内容只需要使用到省级区县距离信息表。本节我们来对相关空间数据表进行简单介绍，方便大家了解相关知识。

1、相关空间表

省域区县距离信息表的物理结构如下：

表里的数据经过之前的省域迂回计算而成，计算的结果我们将直接保存到这张表中，该表的表结构定义语句如下：

sql 复制代码 
CREATE TABLE "biz_provincial_city_distance" (
  "pk_id" int8 NOT NULL,
  "province_code" varchar(16) NOT NULL DEFAULT ''::character varying,
  "province_name" varchar(64) NOT NULL DEFAULT ''::character varying,
  "distance" numeric(10,4) NOT NULL DEFAULT 0,
  "city_name" varchar(64) NOT NULL DEFAULT ''::character varying,
  "geom" "geometry",
  "source" varchar(10) NOT NULL DEFAULT ''::character varying,
  CONSTRAINT "pk_biz_provincial_city_distanc" PRIMARY KEY ("pk_id")
);
COMMENT ON COLUMN "biz_provincial_city_distance"."pk_id" IS '主键';
COMMENT ON COLUMN "biz_provincial_city_distance"."province_code" IS '省份code';
COMMENT ON COLUMN "biz_provincial_city_distance"."province_name" IS '省份name';
COMMENT ON COLUMN "biz_provincial_city_distance"."distance" IS '距离';
COMMENT ON COLUMN "biz_provincial_city_distance"."city_name" IS '城市名称';
COMMENT ON COLUMN "biz_provincial_city_distance"."geom" IS '路线信息';
COMMENT ON COLUMN biz_provincial_city_distance"."source" IS '来源';
COMMENT ON TABLE "biz_provincial_city_distance" IS '省市距离信息表';

2、空间数据查询

关于如何对省域区县行车迂回进行空间查询，在之前的博客内容中有所涉及，这里依然给出实际的查询语句，用于查询指定省份的区县迂回信息，SQL语句如下：

sql 复制代码 
SELECT T.pk_id pkId,
  T.province_name,
	T.city_name cityName,
	T.distance,
	st_asgeojson ( T.geom ) geomJson,
	ST_Length ( T.geom :: geography ) / 1000.0 AS navDist,
	ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) / 1000.0 AS lineDist,
	( ST_Length ( T.geom :: geography ) / ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) ) AS detourCoefficient,
	st_x(ST_StartPoint ( T.geom )) lon,
	st_y(ST_StartPoint ( T.geom )) lat
FROM
	biz_provincial_city_distance T 
WHERE
	T.province_code = '430000' 
ORDER BY
	detourCoefficient;

语句执行以后可以在数据库软件的客户端界面看到以下效果：

二、SpringBoot后端实现

在这样的背景下，我们选择了Spring Boot和Leaflet作为本次实战之旅的主要技术工具。Spring Boot作为当前Java开发领域中极为热门的框架，以其强大的自动配置功能、简洁的开发方式以及出色的性能表现，深受广大开发者的喜爱。它能够帮助我们快速搭建起稳定可靠的后端服务，高效地处理各种业务逻辑和数据交互。本节将重点介绍SpringBoot如何来实现后台的查询服务。

1、模型层实现

模型层的内容比较简单，我们首先需要创建数据的查询对象以及如何在数据库操作中快速的操作这些数据，因此模型层专注数据访问层和视图的定义。返回的视图层对象关键代码如下：

java 复制代码 
package com.yelang.project.extend.earthquake.domain;
import java.io.Serializable;
import java.math.BigDecimal;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class ProvincialCityDistanceVO implements Serializable{
	private static final long serialVersionUID = -9036168942653219124L;
	private Long pkId;//数据主键
	private String cityName;//城市名称
	private BigDecimal distance = new BigDecimal(0);//路径规划距离
	private String geomJson;//路线信息
	private BigDecimal navDist = new BigDecimal(0);//导航距离
	private BigDecimal lineDist = new BigDecimal(0);//直线距离
	private BigDecimal detourCoefficient = new BigDecimal(0);//迂回系数
	private String lat;
	private String lon;
}

在完成视图对象的定义之后，接下来将基于视图对象定义数据库操作层的查询实现。我们这里选择直接将查询语句绑定到查询方法中，关键方法如下：

java 复制代码 
package com.yelang.project.extend.earthquake.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.yelang.project.extend.earthquake.domain.ProvincialCityDistance;
import com.yelang.project.extend.earthquake.domain.ProvincialCityDistanceVO;
public interface ProvincialCityDistanceMapper extends BaseMapper<ProvincialCityDistance>{
	static final String FIND_LIST_BY_PROVINCE_CODE = "<script>"
			+ " SELECT T.pk_id pkId,T.city_name cityName,T.distance,st_asgeojson ( T.geom ) geomJson, "
			+ " ST_Length ( T.geom :: geography ) / 1000.0 AS navDist,st_x(ST_StartPoint ( T.geom )) lon,st_y(ST_StartPoint ( T.geom )) lat, "
			+ " ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) / 1000.0 AS lineDist, "
			+ " ( ST_Length ( T.geom :: geography ) / ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) ) AS detourCoefficient "
			+ " FROM biz_provincial_city_distance T WHERE T.province_code = #{code} ORDER BY detourCoefficient "
			+ "</script>";
	/**
	 * - 查询指定省份的省份及区县距离迂回系数
	 * @param code 省份行政区划编码
	 * @return
	 */
	@Select(FIND_LIST_BY_PROVINCE_CODE)
	List<ProvincialCityDistanceVO> findListByProvinceCode(@Param("code")String code);
}

业务逻辑层的实际这里比较简单不做详细叙述，如果需要可以在评论区进行交流。

2、控制层实现

控制层作为接收前端的请求并且返回响应数据的重要组件，这里主要提供展示界面的跳转以及区县迂回数据列表的获取，核心代码如下：

java 复制代码 
@RequiresPermissions("eq:detourcoefficient:map")
@GetMapping("/detourcoefficient")
public String detourcoefficient(){
   return prefix + "/detourcoefficient";
}
/**
 * - 根据省份code查询迂回距离及系数信息
 * @param pcode 省份code
 * @return
 */
@RequiresPermissions("eq:detourcoefficient:list")
@GetMapping("/detourcoefficient/list/{pcode}")
@ResponseBody
public AjaxResult detourcoefficientList(@PathVariable("pcode") String pcode){
   List<ProvincialCityDistanceVO> dataList = provinceCityDistanceService.findListByProvinceCode(pcode);
   return AjaxResult.success().put("data", dataList);
}

以上就是使用SpringBoot的后台实现，接下来基于后台的相关API来实现WebGIS的展示。

三、Leaflet前端实现

Leaflet则是一个轻量级、功能强大的开源JavaScript地图库，它提供了丰富的API和灵活的扩展性，能够轻松实现地图的展示、路径的绘制以及各种交互效果。通过将Spring Boot与Leaflet相结合，我们不仅能够充分发挥两者的优势，还能实现前后端的高效协同，打造出一个高效、稳定且功能完善的省域迂回可视化系统。本节将重点介绍如何使用Leaflet来进行WebGIS开发和实现，主要进行迂回颜色和数据的展示两个部分，接下来将详细叙述。

1、迂回系数设置及色带配置

为了直观的展示天气的气温信息，我们首先对迂回的值、颜色、气温描述等信息进行定义，这是后续的可视化展示的基础。颜色色带（colormap）是一种常用的工具，用于将数值范围映射到颜色范围。以下是一个详细的区县迂回色带表格，包括颜色的十六进制代码和对应的迂回范围。当然，这份定义信息使用互联网进行搜集：

分类名 迂回系数范围 颜色值 (Hex) RGB 值 (R, G, B) 描述
直线路径 1.0 - 1.2 #00FF00 (0, 255, 0) 路径几乎为直线，效率高
轻微迂回 1.2 - 1.5 #FFFF00 (255, 255, 0) 轻微偏离直线，效率中等
中等迂回 1.5 - 2.0 #FFA500 (255, 165, 0) 明显偏离直线，效率较低
严重迂回 2.0 - 3.0 #FF0000 (255, 0, 0) 高度偏离直线，效率低
极端迂回 > 3.0 #8B0000 (139, 0, 0) 极度偏离直线，效率

当然在实际情况，大于3.0的极端情况是非常少的。 在JavaScript中定义以上颜色分类信息：

javascript 复制代码 
//城市迂回系数及颜色配置
var detourFactorColorList = [
	{name:"直线路径,1.0 - 1.2",color:"#00FF00",rgb:new Color(0, 255, 0),infoDesc:"路径几乎为直线，效率高"},
	{name:"轻微迂回,1.2 - 1.5",color:"#FFFF00",rgb:new Color(75,0,130),infoDesc:"轻微偏离直线，效率中等"},
	{name:"中等迂回,1.5 - 2.0",color:"#FFA500",rgb:new Color(255, 165, 0),infoDesc:"明显偏离直线，效率较低"},
	{name:"严重迂回,2.0 - 3.0",color:"#FF0000",rgb:new Color(255, 0, 0),infoDesc:"高度偏离直线，效率低"},
	{name:"极端迂回,> 3.0",color:"#8B0000",rgb:new Color(139, 0, 0),infoDesc:"极度偏离直线，效率极低"}
];

在WebGIS中需要使用色带即colorMap的方式对颜色进行定义，同时在地图中展示相应的图例，定义的关键代码如下：

javascript 复制代码 
//定义色带
var DIY_BLUE_GREEN_YELLOW_RED_SCHEME;
$(document).ready(function () {
	initSidebar();
	//初始化标注及色带信息
	var legendData = new Array();
	var colorArray = new Array();
	for(var i = 0;i<detourFactorColorList.length;i++){
	    var _tempData = detourFactorColorList[i];
	    legendData.push({
	        label: "\xa0\xa0"+_tempData.name ,
	        type: "rectangle",
	        radius: 12,
	        color: _tempData.color,
	        fillColor: _tempData.color,
	        fillOpacity: 0.8,
	        weight: 2});
	    	colorArray.push(_tempData.rgb);
	    }
    DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 1.0,3.5 ,colorArray);
	initLegend(legendData);
});

2、区县迂回展示

在实际展示数据的时候，我们需要动态的计算迂回系数，同时根据不同的数字来设置不同的颜色值，这里给出颜色获取方法，核心方法如下：

javascript 复制代码 
//根据迂回系数获取颜色
function getColorByDetourCoefficient(detourCoefficient){
	var _tempVal = parseFloat(detourCoefficient);
	if(_tempVal >= 1.0 && _tempVal < 1.2){
	    return "#00FF00";
	}
	if(_tempVal >= 1.2 && _tempVal < 1.5){
	    return "#FFFF00";
	}
	if(_tempVal >= 1.5 && _tempVal < 2.0){
	    return "#FFA500";
	}
	if(_tempVal >= 2.0 && _tempVal < 3.0){
	    return "#FF0000";
	}
	if(_tempVal > 3.0){
	    return "#8B0000";
	}
	return "#8B0000";
}

然后在点击查询时直接展区县的迂回信息，展示方法如下：

javascript 复制代码 
function previewDetourCoefficient(pid,provinceCode,name){
	previewProvince(pid,name);
	$.ajax({  
		type:"get",  
		url:prefix + "/detourcoefficient/list/" + provinceCode,  
	    data:{},  
		dataType:"json",  
		cache:false,
		processData:false,
		success:function(result){
		   if(result.code == web_status.SUCCESS){
		       $("#title_info").html(name+"城市迂回可视化<sub>(L1:导航距离,L2:直线距离)</sub>");
		       collisionLayer.clearLayers();
		       for(var i = 0;i< result.data.length;i++){
		        	var areaData = result.data[i];
		        	var color = getColorByDetourCoefficient(areaData.detourCoefficient);
		        	var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{style: {color:color,fillColor:color,weight:3,"opacity":0.65, fillOpacity: 0.65 }}).addTo(mymap);
			        var myIcon = L.divIcon({
		        		iconSize: null,
		        		className: '',
		        		popupAnchor:[5,5],
		        		shadowAnchor:[5,5],
		        		html: buildShowInfo(i,color,areaData)
		        	});
			        collisionLayer.addLayer(areaLayer);
			        //中心点位
			        L.marker([areaData.lat,areaData.lon], { icon: myIcon}).addTo(collisionLayer);
		        }
		        collisionLayer.addTo(showLayerGroup);
		    }
		},
	     error:function(){
		    $.modal.alertWarning("获取空间信息失败");
		}
	});
}

以上就完成了省域区县数据迂回展示WebGIS前端展示实现代码。下面我们来看一下实际的成果。

四、成果展示

本节将主要描述WebGIS的业务数据展示，这里我们从全国整体迂回情况、重庆市、广东省以及浙江省来进行展示。我们来看看实际的效果是什么样子的？拭目以待吧。

1、全国迂回整体情况

首先我们将省份code注释后，直接查询全国的所有数据信息，使用迂回系数进行升序排序处理，查询的SQL如下：

sql 复制代码 
SELECT T.pk_id pkId,
  T.province_name,
	T.city_name cityName,
	T.distance,
	st_asgeojson ( T.geom ) geomJson,
	ST_Length ( T.geom :: geography ) / 1000.0 AS navDist,
	ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) / 1000.0 AS lineDist,
	( ST_Length ( T.geom :: geography ) / ST_DistanceSphere ( ST_StartPoint ( T.geom ), ST_EndPoint ( T.geom ) ) ) AS detourCoefficient,
	st_x(ST_StartPoint ( T.geom )) lon,
	st_y(ST_StartPoint ( T.geom )) lat
FROM
	biz_provincial_city_distance T 
WHERE T.province_code = '430000' 
ORDER BY
	detourCoefficient;

在客户端软件中执行以上sql，得到的结果如下，首先我们来看一下在全国的背景中，那些城市的迂回系数是接近于直线，也就接近于1的，首先我们来看前5是哪些城市：

最接近于直线是以下五个地方：崇明县、辽宁省盘山县、河南省中牟县、广东省天河区、内蒙古自治区东河区。接下来看看比较迂回的区县，后5名如下：

区县迂回系数按照系数排序，后5名是：湖北省武昌区、香港特别行政区屯门区、山西省石楼县、西藏嘉黎县、西藏林周县、西藏边坝县等。下面将选取三个省份来进行分省份说明。

2、重庆市迂回展示

首先来看下重庆市的迂回展示效果：

重庆迂回系数从低到高，接近直线的前5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist	detourcoefficient
重庆市	潼南区	110.3600	110.51047762948166	97.68331602216999	1.13131374045902
重庆市	梁平县	191.5700	191.7131775208737	168.59402255844	1.1371291497266451
重庆市	永川区	74.1700	74.37440135004668	64.62314433581	1.1508941899138319
重庆市	荣昌区	108.7900	109.06056033597619	94.19726107911	1.157789080983825
重庆市	奉节县	374.5000	374.68521001493286	322.99202917579004	1.1600447570519103

重庆迂回系数从低到高，迂回比较严重的后5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist
重庆市	渝中区	3.6800	3.779657849744212	2.13279590328
重庆市	酉阳土家族苗族自治县	363.2200	363.60072614988763	229.62231250973
重庆市	南岸区	17.9100	17.9817585049283	11.492966037059999
重庆市	秀山土家族苗族自治县	418.8200	419.2231938929248	269.17448974303
重庆市	璧山区	49.9000	50.05221534418218	33.451055879760005

3、广东省迂回展示

广东迂回系数从低到高，接近直线的前5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist	detourcoefficient
广东省	天河区	10.4600	10.555375116530177	9.93596533891	1.0623401709338216
广东省	清新区	80.8300	80.78129002608327	71.98357029	1.122218440967014
广东省	云浮市	143.3900	143.69688311709783	127.0862245763	1.1307038476922031
广东省	云城区	143.4400	143.74862299137553	126.89855706838	1.1327837472093223
广东省	化州市	359.1700	359.34341542307055	315.04612745022	1.1406057212363288

广东省迂回系数从低到高，迂回比较严重的后5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist
广东省	南海区	24.5800	24.65194449512291	16.601655223810003
广东省	江海区	95.2500	95.28713899437355	64.93929472111
广东省	禅城区	28.6400	28.71179642381173	19.632861564219997
广东省	江门市	92.4900	92.42245085649293	63.888415391150005
广东省	高明区	66.1700	66.26498995756911	45.82280085688

4、浙江省迂回展示

浙江迂回系数从低到高，接近直线的前5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist	detourcoefficient
浙江省	鄞州区	153.0700	153.44879641871103	143.26062911380998	1.0711163099584553
浙江省	宁波市	160.7100	161.15227733629254	148.7463844915	1.083402987489094
浙江省	江东区	157.2100	157.6070345898314	143.5287695282	1.098086711869047
浙江省	北仑区	184.4600	184.9446572990281	167.80979248393	1.1021088493196187
浙江省	海曙区	155.7700	156.16887660282018	141.40475136639	1.1044103899887725

浙江省迂回系数从低到高，迂回比较严重的后5名是：

bash 复制代码 
province_name	cityname	distance	navdist	linedist	detourcoefficient
浙江省	江干区	7.9600	8.070236761912987	5.1719456935400006	1.5603869878202874
浙江省	滨江区	14.1100	14.165315020539612	9.09033017652	1.558283884685302
浙江省	下城区	3.9400	4.061935738299966	2.6452204945499997	1.5355754829016535
浙江省	西湖区	4.3000	4.42778184607228	2.90129519486	1.5261397233610143
浙江省	拱墅区	7.5300	7.597207177517023	5.17180335205	1.46896675305832

篇幅有限，这里不一一展示，如果感兴趣，大家可以在评论区留言，可以进行交流。

五、总结

以上就是本文的主要内容，在本次实战之旅中，我们将从项目的需求分析入手，深入探讨省域迂回可视化的具体应用场景和业务需求。然后，我们将详细规划系统的设计，包括后端服务的搭建、数据库的设计以及前端页面的布局等。在后端开发过程中，我们将利用Spring Boot的强大功能，实现数据的获取、处理和存储，同时提供高效的API接口供前端调用。通过本次实战，我们不仅能够深入学习Spring Boot和Leaflet的开发技巧，还能将所学知识应用到实际项目中，解决实际问题，提升自己的技术水平和实践能力。同时，我们也期待这个省域迂回可视化系统能够在实际应用中发挥重要作用，为相关领域的发展提供有力支持，为社会创造更多价值。行文仓促，定有许多的不足之处，欢迎各位朋友在评论区批评指正，不胜感激。

热门推荐
01UV安装并设置国内源02DeepSeek更新！速览DeepSeek V3.1新特性03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）07Claude Code VSCode集成开发指南：AI编程助手完整配置08Spring 调试终于不再痛苦了092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10【大模型实战篇】部署GPT-OSS-120B踩得坑（vllm / ollama等推理框架）