Spring Boot携手Leaflet：开启省域迂回可视化实战之旅
目录
前言
一、空间数据基础
1、相关空间表
2、空间数据查询
二、SpringBoot后端实现
1、模型层实现
2、控制层实现
三、Leaflet前端实现
1、迂回系数设置及色带配置
2、区县迂回展示
四、成果展示
1、全国迂回整体情况
2、重庆市迂回展示
3、广东省迂回展示
4、浙江省迂回展示
五、总结
前言
在当今数字化与信息化飞速发展的时代，地理空间数据的可视化已成为众多领域不可或缺的重要工具。从城市规划到交通管理，从资源调配到环境保护，直观呈现地理信息的能力对于提升决策效率、优化资源配置以及改善公共服务质量都有着极为重要的意义。省域迂回可视化，作为一种能够精准呈现区域内复杂路径与动态变化的可视化技术，更是有着极为广阔的应用前景。它不仅可以帮助相关部门更好地规划交通网络、优化物流配送路线，还能为旅游规划、灾害应急救援等提供有力支持。省域迂回可视化技术的建设具有极其重要的意义。从交通领域来看，随着经济的快速发展和城市化进程的加速，交通拥堵问题日益严重，物流运输成本不断攀升。通过省域迂回可视化，我们可以清晰地看到交通流量的分布情况，分析出交通拥堵的节点，从而为交通规划部门提供科学合理的决策依据，优化交通网络布局，缓解交通压力。同时，对于物流企业而言，可视化技术能够帮助他们规划出更加高效的配送路线，减少运输时间和成本，提高物流效率。在旅游行业，游客对于个性化旅游体验的需求越来越高。省域迂回可视化可以根据游客的兴趣点和时间安排，为其提供最佳的旅游路线规划，让游客能够更加便捷地游览各个景点，提升旅游体验。此外，在城市规划中，可视化工具能够帮助决策者更好地理解城市交通流量、基础设施布局以及人口分布等情况，从而制定更加科学合理的规划方案，推动城市的可持续发展。在灾害应急救援方面，时间就是生命。省域迂回可视化可以快速生成救援路线，帮助救援队伍避开拥堵路段，以最短的时间到达受灾现场，提高救援效率，减少灾害损失。
在本次实战之旅中，我们将从项目的需求分析入手，深入探讨省域迂回可视化的具体应用场景和业务需求。然后，我们将详细规划系统的设计，包括后端服务的搭建、数据库的设计以及前端页面的布局等。在后端开发过程中，我们将利用Spring Boot的强大功能，实现数据的获取、处理和存储，同时提供高效的API接口供前端调用。在前端开发中，我们将借助Leaflet库，实现地图的加载、路径的可视化绘制以及各种交互功能的开发。我们还将重点研究如何优化系统的性能，提高数据处理效率，确保系统在面对大量用户访问和复杂数据时能够稳定运行。
通过本次实战，我们不仅能够深入学习Spring Boot和Leaflet的开发技巧，还能将所学知识应用到实际项目中，解决实际问题，提升自己的技术水平和实践能力。同时，我们也期待这个省域迂回可视化系统能够在实际应用中发挥重要作用，为相关领域的发展提供有力支持，为社会创造更多价值。
一、空间数据基础
本节我们对相关的空间数据基础做一个简单的介绍，本博客的内容只需要使用到省级区县距离信息表。本节我们来对相关空间数据表进行简单介绍，方便大家了解相关知识。
1、相关空间表
省域区县距离信息表的物理结构如下：
表里的数据经过之前的省域迂回计算而成，计算的结果我们将直接保存到这张表中，该表的表结构定义语句如下：
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语句如下：
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 )) latFROMbiz_provincial_city_distance T WHERET.province_code = \'430000\' ORDER BYdetourCoefficient;语句执行以后可以在数据库软件的客户端界面看到以下效果：
二、SpringBoot后端实现
在这样的背景下，我们选择了Spring Boot和Leaflet作为本次实战之旅的主要技术工具。Spring Boot作为当前Java开发领域中极为热门的框架，以其强大的自动配置功能、简洁的开发方式以及出色的性能表现，深受广大开发者的喜爱。它能够帮助我们快速搭建起稳定可靠的后端服务，高效地处理各种业务逻辑和数据交互。本节将重点介绍SpringBoot如何来实现后台的查询服务。
1、模型层实现
模型层的内容比较简单，我们首先需要创建数据的查询对象以及如何在数据库操作中快速的操作这些数据，因此模型层专注数据访问层和视图的定义。返回的视图层对象关键代码如下：
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@ToStringpublic 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;}在完成视图对象的定义之后，接下来将基于视图对象定义数据库操作层的查询实现。我们这里选择直接将查询语句绑定到查询方法中，关键方法如下：
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{static final String FIND_LIST_BY_PROVINCE_CODE = \"\"+ \" 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 \"+ \"\";/** * - 查询指定省份的省份及区县距离迂回系数 * @param code 省份行政区划编码 * @return */@Select(FIND_LIST_BY_PROVINCE_CODE)List findListByProvinceCode(@Param(\"code\")String code);}业务逻辑层的实际这里比较简单不做详细叙述，如果需要可以在评论区进行交流。
2、控制层实现
控制层作为接收前端的请求并且返回响应数据的重要组件，这里主要提供展示界面的跳转以及区县迂回数据列表的获取，核心代码如下：
@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}\")@ResponseBodypublic AjaxResult detourcoefficientList(@PathVariable(\"pcode\") String pcode){ List dataList = provinceCityDistanceService.findListByProvinceCode(pcode); return AjaxResult.success().put(\"data\", dataList);}以上就是使用SpringBoot的后台实现，接下来基于后台的相关API来实现WebGIS的展示。
三、Leaflet前端实现
Leaflet则是一个轻量级、功能强大的开源JavaScript地图库，它提供了丰富的API和灵活的扩展性，能够轻松实现地图的展示、路径的绘制以及各种交互效果。通过将Spring Boot与Leaflet相结合，我们不仅能够充分发挥两者的优势，还能实现前后端的高效协同，打造出一个高效、稳定且功能完善的省域迂回可视化系统。本节将重点介绍如何使用Leaflet来进行WebGIS开发和实现，主要进行迂回颜色和数据的展示两个部分，接下来将详细叙述。
1、迂回系数设置及色带配置
为了直观的展示天气的气温信息，我们首先对迂回的值、颜色、气温描述等信息进行定义，这是后续的可视化展示的基础。颜色色带（colormap）是一种常用的工具，用于将数值范围映射到颜色范围。以下是一个详细的区县迂回色带表格，包括颜色的十六进制代码和对应的迂回范围。当然，这份定义信息使用互联网进行搜集：
当然在实际情况，大于3.0的极端情况是非常少的。 在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的方式对颜色进行定义，同时在地图中展示相应的图例，定义的关键代码如下：
//定义色带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、区县迂回展示
在实际展示数据的时候，我们需要动态的计算迂回系数，同时根据不同的数字来设置不同的颜色值，这里给出颜色获取方法，核心方法如下：
//根据迂回系数获取颜色function getColorByDetourCoefficient(detourCoefficient){var _tempVal = parseFloat(detourCoefficient);if(_tempVal >= 1.0 && _tempVal = 1.2 && _tempVal = 1.5 && _tempVal = 2.0 && _tempVal 3.0){ return \"#8B0000\";}return \"#8B0000\";}然后在点击查询时直接展区县的迂回信息，展示方法如下：
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+\"城市迂回可视化(L1:导航距离,L2:直线距离)\"); 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如下：
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 )) latFROMbiz_provincial_city_distance T WHERE T.province_code = \'430000\' ORDER BYdetourCoefficient;在客户端软件中执行以上sql，得到的结果如下，首先我们来看一下在全国的背景中，那些城市的迂回系数是接近于直线，也就接近于1的，首先我们来看前5是哪些城市：
最接近于直线是以下五个地方：崇明县、辽宁省盘山县、河南省中牟县、广东省天河区、内蒙古自治区东河区。接下来看看比较迂回的区县，后5名如下：
区县迂回系数按照系数排序，后5名是：湖北省武昌区、香港特别行政区屯门区、山西省石楼县、西藏嘉黎县、西藏林周县、西藏边坝县等。下面将选取三个省份来进行分省份说明。
2、重庆市迂回展示
首先来看下重庆市的迂回展示效果：
重庆迂回系数从低到高，接近直线的前5名是：
province_namecitynamedistancenavdistlinedistdetourcoefficient重庆市潼南区110.3600110.5104776294816697.683316022169991.13131374045902重庆市梁平县191.5700191.7131775208737168.594022558441.1371291497266451重庆市永川区74.170074.3744013500466864.623144335811.1508941899138319重庆市荣昌区108.7900109.0605603359761994.197261079111.157789080983825重庆市奉节县374.5000374.68521001493286322.992029175790041.1600447570519103重庆迂回系数从低到高，迂回比较严重的后5名是：
province_namecitynamedistancenavdistlinedist重庆市渝中区3.68003.7796578497442122.13279590328重庆市酉阳土家族苗族自治县363.2200363.60072614988763229.62231250973重庆市南岸区17.910017.981758504928311.492966037059999重庆市秀山土家族苗族自治县418.8200419.2231938929248269.17448974303重庆市璧山区49.900050.0522153441821833.4510558797600053、广东省迂回展示
广东迂回系数从低到高，接近直线的前5名是：
province_namecitynamedistancenavdistlinedistdetourcoefficient广东省天河区10.460010.5553751165301779.935965338911.0623401709338216广东省清新区80.830080.7812900260832771.983570291.122218440967014广东省云浮市143.3900143.69688311709783127.08622457631.1307038476922031广东省云城区143.4400143.74862299137553126.898557068381.1327837472093223广东省化州市359.1700359.34341542307055315.046127450221.1406057212363288广东省迂回系数从低到高，迂回比较严重的后5名是：
province_namecitynamedistancenavdistlinedist广东省南海区24.580024.6519444951229116.601655223810003广东省江海区95.250095.2871389943735564.93929472111广东省禅城区28.640028.7117964238117319.632861564219997广东省江门市92.490092.4224508564929363.888415391150005广东省高明区66.170066.2649899575691145.822800856884、浙江省迂回展示
浙江迂回系数从低到高，接近直线的前5名是：
province_namecitynamedistancenavdistlinedistdetourcoefficient浙江省鄞州区153.0700153.44879641871103143.260629113809981.0711163099584553浙江省宁波市160.7100161.15227733629254148.74638449151.083402987489094浙江省江东区157.2100157.6070345898314143.52876952821.098086711869047浙江省北仑区184.4600184.9446572990281167.809792483931.1021088493196187浙江省海曙区155.7700156.16887660282018141.404751366391.1044103899887725浙江省迂回系数从低到高，迂回比较严重的后5名是：
province_namecitynamedistancenavdistlinedistdetourcoefficient浙江省江干区7.96008.0702367619129875.17194569354000061.5603869878202874浙江省滨江区14.110014.1653150205396129.090330176521.558283884685302浙江省下城区3.94004.0619357382999662.64522049454999971.5355754829016535浙江省西湖区4.30004.427781846072282.901295194861.5261397233610143浙江省拱墅区7.53007.5972071775170235.171803352051.46896675305832篇幅有限，这里不一一展示，如果感兴趣，大家可以在评论区留言，可以进行交流。
五、总结
以上就是本文的主要内容，在本次实战之旅中，我们将从项目的需求分析入手，深入探讨省域迂回可视化的具体应用场景和业务需求。然后，我们将详细规划系统的设计，包括后端服务的搭建、数据库的设计以及前端页面的布局等。在后端开发过程中，我们将利用Spring Boot的强大功能，实现数据的获取、处理和存储，同时提供高效的API接口供前端调用。通过本次实战，我们不仅能够深入学习Spring Boot和Leaflet的开发技巧，还能将所学知识应用到实际项目中，解决实际问题，提升自己的技术水平和实践能力。同时，我们也期待这个省域迂回可视化系统能够在实际应用中发挥重要作用，为相关领域的发展提供有力支持，为社会创造更多价值。行文仓促，定有许多的不足之处，欢迎各位朋友在评论区批评指正，不胜感激。
