目录
前言
在当今数字化与信息化飞速发展的时代，地理信息的可视化呈现已成为众多领域不可或缺的关键环节。从城市规划到资源分配，从公共服务布局到商业智能决策，直观、高效地展示地理区域相关数据，能为各类决策提供有力依据，帮助人们更好地理解复杂的空间关系和数据分布。省级行政区作为国家行政体系的重要构成单元，在众多宏观层面的分析与决策中占据核心地位。无论是进行区域经济发展战略的制定，还是评估公共服务在各省的覆盖情况，了解省级行政区的地理范围及其简称所代表的区域特性，都是基础且关键的一步。然而，传统以文字表格或简单地图标注的形式来呈现这些信息，往往存在诸多局限。一方面，文字表格缺乏直观的空间感知，难以让人们快速建立起区域间的相对位置和范围大小的概念；另一方面，简单地图标注在面对大量数据叠加、交互需求以及动态更新时，显得力不从心。
Spring Boot 作为一种流行的开源 Java 开发框架，凭借其简洁高效的配置方式和强大的生态集成能力，为快速构建稳定、可扩展的后端服务提供了坚实基础。它使得开发者能够专注于核心业务逻辑的实现，而无需在复杂的基础设施搭建和配置上耗费过多精力，大大缩短了开发周期，提高了开发效率。同时，随着 Web 前端技术的不断演进，地图可视化库层出不穷，而 Leaflet 凭借其轻量级、易用性和出色的性能，在众多地图库中脱颖而出，广泛应用于各类地理信息可视化项目中。Leaflet 支持丰富的地图图层定制、交互操作以及响应式设计，能够轻松应对从桌面到移动设备的多种终端展示需求，确保用户在不同设备上都能获得流畅、一致的可视化体验。
本实践旨在结合 Spring Boot 和 Leaflet 的优势，探索一套高效、实用的省级行政区及其简称可视化解决方案。通过 Spring Boot 搭建稳定的后端数据服务，实现对省级行政区数据的存储、查询和管理，确保数据的准确性和及时性；利用 Leaflet 强大的前端地图渲染和交互功能，将这些数据以直观、美观且易于交互的方式呈现给用户。这不仅有助于提升地理信息在相关业务场景中的应用价值，也为后续进一步拓展地理信息可视化应用，如叠加更多地理要素数据、实现复杂的空间分析功能等，奠定坚实的基础。在接下来的内容中，我们将详细阐述整个实践过程，包括技术选型的细节考量、系统架构的设计思路、前后端的具体实现方法以及遇到的挑战与解决方案，希望为有类似需求的开发者提供有价值的参考和借鉴，共同推动地理信息可视化技术在更多领域的广泛应用和发展。
一、省级行政区及简称
关于我国的省级行政区及其简称信息，相信大家不会陌生，不知道大家能不能一下回忆起来所有的省份及其对应的简称呢？如果不太记得，那么本节将首先简单带大家一起回忆一下，把这些基础知识捡起来。
1、省级行政区及其简称
关于省级行政区信息，我们可以从相关的官方网站来搜索，这里我们采用百度检索的具体数据。我国共有34个省级行政区，包括23个省、5个自治区、4个直辖市、2个特别行政区。在历史和习惯上，各省级行政区都有简称。
省级行政区 |
简称 |
行政中心 |
|---|---|---|
北京市 |
京 |
北京 |
天津市 |
津 |
天津 |
河北省 |
冀 |
石家庄 |
山西省 |
晋 |
太原 |
内蒙古自治区 |
内蒙古 |
呼和浩特 |
辽宁省 |
辽 |
沈阳 |
吉林省 |
吉 |
长春 |
黑龙江省 |
黑 |
哈尔滨 |
上海市 |
沪 |
上海 |
江苏省 |
苏 |
南京 |
浙江省 |
浙 |
杭州 |
安徽省 |
皖 |
合肥 |
福建省 |
闽 |
福州 |
江西省 |
赣 |
南昌 |
山东省 |
鲁 |
济南 |
河南省 |
豫 |
郑州 |
湖北省 |
鄂 |
武汉 |
湖南省 |
湘 |
长沙 |
广东省 |
粤 |
广州 |
广西壮族自治区 |
桂 |
南宁 |
海南省 |
琼 |
海口 |
重庆市 |
渝 |
重庆 |
四川省 |
川/蜀 |
成都 |
贵州省 |
黔/贵 |
贵阳 |
云南省 |
滇/云 |
昆明 |
西藏自治区 |
藏 |
拉萨 |
陕西省 |
陕/秦 |
西安 |
甘肃省 |
甘/陇 |
兰州 |
青海省 |
青 |
西宁 |
宁夏回族自治区 |
宁 |
银川 |
新疆维吾尔自治区 |
新 |
乌鲁木齐 |
香港特别行政区 |
港 |
香港 |
澳门特别行政区 |
澳 |
澳门 |
台湾省 |
台 |
台北 |
2、映射对应关系管理
有了上面的表格之后，下面我们需要在数据库中建立映射关系，将省份和简称信息进行对应。在若依系统中，我们可以使用字典表来进行管理。存储管理方式也比较简单，当然在实际管理中，我们只需要存储省级行政区的代码和简称即可，其它的信息不在字典表中做管理，减少冗余。字典表的表结构如下所示：
3、使用若依进行管理
这里介绍如何在若依系统中基于数据字典的方式来进行省级行政区的简称管理，在数据字典中新增一条记录，字典的名称是：中国省份简称，字典类型为：province_abbreviations，如下图所示：
完成字典类型的定义以后，接下来就可以创建各省级行政区编码及其简称的对应关系，点击字典列表中的“列表”按钮，打开列表管理界面，如下所示：
在这里，需要我们逐个进行登记，作为后续的可视化的一个基础数据，这里随便点开一条数据查看一下，大家可以参考进行配置：
完成后，点击确定进行保存，并退出当前界面。
二、PostGIS存储与检索
本节将介绍本功能涉及的相关表，以及如何基于PostGIS的空间数据查询。
1、涉及的相关表
| 序号 | 数据库表名 | 说明 |
| 1 | biz_geographic_name | 地名信息表，用于存储地名的点位数据 |
| 2 | biz_province | 省份信息表 |
| 3 | sys_dict_data | 数据字典表 |
2、省级行政区及简称检索
要实现省级行政区及其简称的检索，需要使用到前面一节介绍过的三张表，地名信息表的作用是为了在地图中展示省份时，可以将其位置标注到对应的省会城市地理位置中，省份信息中的省级行政区编码是关联数据字典表中的简称信息的关键，同时在省级行政范围的展示也是直接取的省份信息表中的空间字段。查询的SQL如下：
SELECT T.NAME cityName,
T.pinYin,
T.bz,
T.slx,
tc.code provinceCode,
tc.NAME provinceName,
st_x ( T.geom ) cityLon,
st_y ( T.geom ) cityLat,
dict.dict_label provinceAbbreviations,
st_asgeojson ( tc.geom ) geomJson
FROM
biz_geographic_name T,
biz_province tc,
sys_dict_data dict
WHERE
T.bz IN ( '省会城市', '直辖市', '首都' )
AND st_contains ( tc.geom, T.geom )
AND dict.dict_value = tc.code ;在数据库客户端软件中执行上述SQL可以得到以下的执行结果：
三、应用的设计与实现
本节将重点介绍后端和前端的实现。后端程序实现使用SpringBoot技术栈，前端使用Leaflet地图展示组件。
1、Java后端程序实现
基于 Spring Boot 框架构建后端应用，利用其简洁高效的开发模式和丰富的生态集成能力。后端主要负责与 PostGIS 数据库的交互，处理业务逻辑，如接收前端请求、查询数据库获取省级行政区数据、对数据进行加工处理等操作。通过定义清晰的接口和数据传输对象（DTO），确保前后端数据交互的顺畅和高效。后端的开发要有控制层、业务层、模型层，博客内容涉及的查询比较简单，这里介绍模型的实现，控制层和业务层较简单，在此不赘述。模型层的查询方法如下：
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.GeographicName;
import com.yelang.project.extend.earthquake.domain.GeographicNameVo;
import com.yelang.project.extend.earthquake.domain.ProvinceAbbreviationsVo;
public interface GeographicNameMapper extends BaseMapper<GeographicName>{
static final String FIND_PROVINCEABBREVIATIONS_LIST = "<script>"
+ " SELECT T.name cityName,T.pinYin,T.bz,T.slx,tc.code provinceCode,tc.NAME provinceName, "
+ " st_x ( T.geom ) cityLon,st_y ( T.geom ) cityLat,dict.dict_label provinceAbbreviations, "
+ " st_asgeojson ( tc.geom ) geomJson "
+ " FROM biz_geographic_name T,biz_province tc,sys_dict_data dict "
+ " WHERE T.bz IN ( '省会城市', '直辖市', '首都' ) AND st_contains ( tc.geom, T.geom ) AND dict.dict_value = tc.code "
+ "</script>";
@Select(FIND_PROVINCEABBREVIATIONS_LIST)
List<ProvinceAbbreviationsVo> findProvinceAbbreviations();
}2、Leaflet前端实现
这里重点介绍在Leaflet中如何对标注信息进行避让，在地图的中文标注中，如何不设置避让，就会出现重叠从而影响页面的整体美观。 通过设置地图图层、标记点、弹出框等元素，直观地呈现省级行政区的边界、名称、简称等信息。并且，结合 Leaflet 的交互功能，用户可以在地图上进行缩放、平移操作，点击省级行政区查看详细信息，实现与地图的良好交互体验，满足用户对地理信息可视化的需求。这里介绍一种基于前端Rtree的实现方式，来进行中文标注的避让实现。需要引用的依赖组件如下：
<!-- 引入rbush.js -->
<script th:src="@{/js/plugins/rbush/rbush.js}"></script>
<!-- 引入Leaflet.LayerGroup.Collision.js -->
<script th:src="@{/js/plugins/layergroup-collision/Leaflet.LayerGroup.Collision.js}"></script>在设置标记点位的时候，需要将原来的设置到LayerGroup的方法替换成先设置到防碰撞图层中。关键代码如下：
var collisionLayer = L.LayerGroup.collision({margin:2});
function previewProvince(){
$.ajax({
type:"get",
url:prefix + "/abbreviations/list",
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();
var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{style: {color:color,fillColor:color,weight:3,"opacity":0.65, fillOpacity: 0.65 }}).addTo(collisionLayer);
var myIcon = L.divIcon({
iconSize: null,
className: '',
popupAnchor:[5,5],
shadowAnchor:[5,5],
html: buildShowInfo(i,color,areaData)
});
showLayerGroup.addLayer(areaLayer);
//中心点位
L.marker([areaData.cityLat,areaData.cityLon
], { icon: myIcon}).addTo(collisionLayer);
showLayerGroup.addLayer(collisionLayer);
legendData.push({
label: "\xa0\xa0"+areaData.provinceAbbreviations,
type: "rectangle",
radius: 12,
color: color,
fillColor: color,
fillOpacity: 0.8,
weight: 2});
}
initLegend(legendData);
}
},
error:function(){
$.modal.alertWarning("获取空间信息失败");
}
});
}经过以上的步骤，就已经完成了前后端的设计与实现。 下面来看详细的地图展示效果。
四、成果展示
通过 Spring Boot 后端与 Leaflet 前端的协同工作，成功实现了全国省级行政区及其简称的可视化展示。在地图上，清晰地呈现出各个省级行政区的轮廓边界，名称和简称准确标注，整体布局合理、美观，用户能够一目了然地了解全国各省的分布情况和基本信息。下面将展示不同的地区的省份及其简称信息（以我国传统地理分区的角度）。
1、东北地区
东北地区：黑龙江省、吉林省、辽宁省，从地理空间上看，三个省份的省会比较接近。
2、华北地区
华北地区： 含盖北京市、天津市、河北省、山西省及内蒙古自治区。
3、华东地区
华东地区： 含上海市、江苏省、浙江省、安徽省等。
4、华中地区
华中地区： 含湖南省、湖北省、河南省等。
5、华南地区
华南地区： 含广西壮族自治区、广东省、海南省等。
6、西南地区
西南地区： 含四川省、贵州省、云南省、重庆市等。
7、西北地区
西北地区： 含陕西省、宁夏回族自治区、青海省、甘肃省等。当然，西北还包括两个很广大的区域，新疆和西藏，如下图：
五、总结
以上就是本文的主要内容，本实践旨在结合 Spring Boot 和 Leaflet 的优势，探索一套高效、实用的省级行政区及其简称可视化解决方案。通过 Spring Boot 搭建稳定的后端数据服务，实现对省级行政区数据的存储、查询和管理，确保数据的准确性和及时性；利用 Leaflet 强大的前端地图渲染和交互功能，将这些数据以直观、美观且易于交互的方式呈现给用户。这不仅有助于提升地理信息在相关业务场景中的应用价值，也为后续进一步拓展地理信息可视化应用，如叠加更多地理要素数据、实现复杂的空间分析功能等，奠定坚实的基础。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。