目录
前言
一、技术实现路径
1、空间数据检索
2、数据展示检索流程
二、SpringBoot后台实现
1、模型层实现
2、控制层实现
三、WebGIS前端实现
1、控制面展示
2、成果展示
四、总结
前言
在数字化浪潮席卷全球的今天，数据已成为驱动社会经济发展、指导政策制定、促进科学研究的关键要素。如何高效收集、处理并直观展现这些数据，成为了各领域面临的重要课题。特别是在经济学领域，GDP（国内生产总值）作为衡量一个国家或地区经济规模和发展水平的核心指标，其数据的可视化不仅能够帮助我们迅速把握经济状况，还能为政策制定者提供有力的决策支持。在此背景下，结合SpringBoot这一轻量级Java开发框架与Leaflet这一开源JavaScript库，开展邻省GDP可视化实战项目，无疑是一次富有意义的技术探索与实践。
将SpringBoot与Leaflet结合，构建邻省GDP可视化系统，旨在通过后端强大的数据处理能力，结合前端直观的地图展示，实现数据的动态更新与交互分析。该系统首先利用SpringBoot搭建后端服务，负责数据的收集、清洗、存储及API接口的提供。考虑到数据的时效性和准确性，后端可能会定期从国家统计局等权威渠道获取最新的GDP数据，并通过RESTful API向前端提供服务。前端则利用Leaflet构建交互式地图界面，将邻省的GDP数据以地图标注、区域填充色等形式直观展现，用户可以通过点击、悬停等操作查看具体省份的GDP信息，甚至进行时间序列对比，从而更深入地理解经济发展趋势和区域差异。
总之，基于SpringBoot和Leaflet的邻省GDP可视化实战项目，不仅是一次技术上的融合创新，更是对经济学数据可视化应用的一次深入探索。通过这一项目，我们不仅能够提升数据处理与分析的能力，还能在实践中加深对经济现象的理解，为推动区域经济的均衡发展贡献科技力量。
一、技术实现路径
SpringBoot，作为Spring家族的一员，以其“约定优于配置”的理念简化了企业级应用的开发流程，使得开发者能够专注于业务逻辑的实现，而非繁琐的配置管理。它提供了丰富的内置功能，如嵌入式服务器、自动配置、健康检查等，极大地提高了开发效率和应用的可靠性。在构建后端服务时，SpringBoot能够轻松实现对数据库的操作、API接口的设计以及与其他服务的集成，为前端提供稳定且高效的数据支持。而Leaflet，作为一款轻量级的开源JavaScript地图库，以其简洁的API、良好的跨浏览器兼容性以及丰富的插件生态，成为了实现地理数据可视化的首选工具。Leaflet不仅支持基本的地图操作（如缩放、平移），还能轻松叠加各种地理数据图层，如图标标记、多边形、热力图等，使得地理信息的展示既直观又富有互动性。更重要的是，Leaflet能够与多种数据源无缝对接，包括GeoJSON、KML等格式，为开发者提供了极大的灵活性。
1、空间数据检索
关于在PostGIS中进行相邻省份的检索实现，在之前的博客中有过介绍：基于PostGIS的省域空间相邻检索实践。对于空间数据表的设计与空间检索有详细的介绍。这里将关键的空间检索实现表示如下：
static final String NEIGHBOR_PROVINCE_BYID = "<script>"
+ " select id,code,name,type,st_asgeojson(geom) geomJson from biz_province where id = #{id} "
+ " union "
+ " select t.id,t.code,t.name,t.type,st_asgeojson(t.geom) geomJson from biz_province s,biz_province t "
+ " where s.id = #{id} and ST_Touches(s.geom,t.geom)"
+ "</script>";2、数据展示检索流程
首先根据前端传入的省域信息，根据省域ID使用St_touches函数查询相邻的省份，然后在后台的Service层方法中查找对应省份的GDP数据， 为了方便在Leaflet前台页面中进行集中展示，我们需要将省份的属性信息、GDP信息和Geometry空间信息进行融合，返回给前端带有GeoJSON的数据接口，最后调用Leaflet的Polygon绘制函数进行绘制。为了方便数据展示，GDP数据我们采用从互联网获取的公开信息，如下：
以上表格就是我们的基础数据，通过查询得到的省份信息关联GDP可以得到联合的数据后在前端进行展示。
二、SpringBoot后台实现
本节将重点介绍在SpringBoot中如何实现对PostGIS空间数据库的检索以及控制层API的实现。
1、模型层实现
在数据库操作模型层中，需要实现前文提到过的相邻国家查询检索方法，在Mapper中的关键代码如下：
static final String NEIGHBOR_PROVINCE_BYID = "<script>"
+ " select id,code,name,type,st_asgeojson(geom) geomJson from biz_province where id = #{id} "
+ " union "
+ " select t.id,t.code,t.name,t.type,st_asgeojson(t.geom) geomJson from biz_province s,biz_province t "
+ " where s.id = #{id} and ST_Touches(s.geom,t.geom)"
+ "</script>";
/**
* - 根据省份主键ID查询邻省列表 add by 夜郎king in 2025-02-02
* @param id 查询省份ID
* @return 该国对应的邻省列表
*/
@Select(NEIGHBOR_PROVINCE_BYID)
List<Province> findNeighborProvinceById(@Param("id")Long id);为了方便在前台将gdp数据与省份信息进行融合，同时可以实现对象的最大共享，我们基于省份Province对象扩展出一个子类，仅包含一个GDP的属性。
package com.yelang.project.extend.earthquake.domain;
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 ProvinceGdpVO extends Province{
private static final long serialVersionUID = 4740578201189215164L;
private BigDecimal gdp = new BigDecimal("0");
}2、控制层实现
控制层为了实现方便，这里没有将各个省份的GDP数据保存到数据库中，仅模拟使用一个Map数据进行保存。从PostGIS数据库中查询到对应的省份信息后，在根据key去hashMap中进行获取。这种计算方法比较快，实际业务中，我们可以将GDP数据缓存到服务器中，因为这种数据基本上都是不变的，这样可以极大的提升程序的性能。
@RequiresPermissions("eq:nearprovince:list")
@GetMapping("/nearprovince/list/{id}")
@ResponseBody
public AjaxResult nearProvinceList(@PathVariable("id") Long id){
List<ProvinceGdpVO> provinceGdpList = new ArrayList<ProvinceGdpVO>();
List<Province> provinces = provinceService.findNeighborProvinceById(id);
Map<String,BigDecimal> gdpMap = provinceService.province2024GdpMap();
if(StringUtils.isNotEmpty(provinces)) {
for(Province p : provinces) {
ProvinceGdpVO gdpVo = new ProvinceGdpVO();
BeanUtils.copyBeanProp(gdpVo, p);
if(gdpMap.containsKey(gdpVo.getCode())) {
gdpVo.setGdp(gdpMap.get(gdpVo.getCode()));
}
provinceGdpList.add(gdpVo);
}
}
return AjaxResult.success().put("data", provinceGdpList);
}可以在前端来看一下返回的数据格式：
三、WebGIS前端实现
本节将重点展示在Leafelt中如何实现对相邻省份的空间信息以及它的GDP等关键信息的综合展示，关于Leaflet中展示相关信息，在之前的系列博文中均有所提及，故不再赘述。
1、控制面展示
在Leaflet中将循环获取的各个省份的GeoJSON数据信息，然后将GeoJSON数据展示出来。关键代码如下：
function previewGdp(gid,name){
$.ajax({
type:"get",
url:prefix + "/nearprovince/list/" + gid,
data:{},
dataType:"json",
cache:false,
processData:false,
success:function(result){
if(result.code == web_status.SUCCESS){
showLayerGroup.clearLayers();
var legendData = new Array();
for(var i = 0;i< result.data.length;i++){
var areaData = result.data[i];
var color = ccolor = getRandomColor();
if(gid == areaData.id){
color = "red";
}
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)
});
showLayerGroup.addLayer(areaLayer);
//中心点位
L.marker(areaLayer.getBounds().getCenter(), { icon: myIcon}).addTo(showLayerGroup);
legendData.push({
label: "\xa0\xa0"+areaData.name,
type: "rectangle",
radius: 12,
color: color,
fillColor: color,
fillOpacity: 0.8,
weight: 2});
}
mymap.fitBounds(showLayerGroup.getBounds());
//legend.remove();
initLegend(legendData);
}
},
error:function(){
$.modal.alertWarning("获取空间信息失败");
}
});
}下面就来看一下2024年全国各个省份及其邻省的GDP信息展示成果。
2、成果展示
首先来看下傲视群雄的广东省，如下图所示:
广东省2024年GDP是141633.81亿元，它的相邻省份分别是：广西壮族自治区、湖南省、江西省、福建省、香港特别行政区和澳门特别行政区。由于香港和澳门的相关数据暂未发布，因此暂时未列入其中。可以看到广西的GDP是28649.40亿元，湖南是53230.99亿元，江西GDP为34202.5亿元，福建GDP为57761.02亿元。广东一个省几乎是人家三个省的和。看了第一名的省份，接下来看一下排名靠中的湖南省，如下图所示：
与湖南省相邻的省份中， 除了前面介绍过的省份外，还有湖北省、重庆市、贵州省。这三个省份中，湖北省的GDP比湖南省的要稍微多一点，为60012.97亿元，重庆市为32193.15亿元，贵州GDP为22667.12亿元。湖南省的GDP相当于重庆市和贵州省GDP之和。最后来看一下青海省的GDP，如下图所示：
青海省2024年的GDP是3950.8亿元，而其相邻省份西藏自治区的GDP为2764.94亿元，新疆维吾尔自治区20534.08亿元，甘肃GDP为13002.9亿元，四川GDP为64697.0亿元 。 从数值上可以看到，青海省的GDP还是比较少的，同比发现四川的GDP是比较高的，在全国的排名中也是可以排到前5的，这非常了不起。四川与前面几个省份（广东、江苏、山东、浙江）不一样的是，四川是位于内陆的省份。
四、总结
以上就是本文的主要内容，本文将SpringBoot与Leaflet结合，构建邻省GDP可视化系统，旨在通过后端强大的数据处理能力，结合前端直观的地图展示，实现数据的动态更新与交互分析。基于SpringBoot和Leaflet的邻省GDP可视化实战项目，不仅是一次技术上的融合创新，更是对经济学数据可视化应用的一次深入探索。通过这一项目，我们不仅能够提升数据处理与分析的能力，还能在实践中加深对经济现象的理解，为推动区域经济的均衡发展贡献科技力量。行文仓促，难免有许多不足之处，如有不足，在此恳请各位专家博主在评论区不吝留言指出，不胜感激。
