基于 SpringBoot 和 Leaflet 的省级行政区及简称可视化

2、映射对应关系管理

有了上面的表格之后，需要在数据库中建立映射关系，将省份和简称信息进行对应。在若依系统中，可以使用字典表来进行管理。存储管理方式比较简单，实际管理中只需要存储省级行政区的代码和简称即可，其它的信息不在字典表中做管理，减少冗余。字典表的表结构如下所示：

3、使用若依进行管理

在若依系统中基于数据字典的方式来进行省级行政区的简称管理，在数据字典中新增一条记录，字典的名称是：中国省份简称，字典类型为：province_abbreviations。

完成字典类型的定义以后，接下来就可以创建各省级行政区编码及其简称的对应关系，打开列表管理界面：

在这里，需要逐个进行登记，作为后续的可视化的一个基础数据，可以参考配置：

完成后，点击确定进行保存，并退出当前界面。

二、PostGIS 存储与检索

本节将介绍本功能涉及的相关表，以及如何基于 PostGIS 的空间数据查询。

1、涉及的相关表

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 强大的前端地图渲染和交互功能，将这些数据以直观、美观且易于交互的方式呈现给用户。这不仅有助于提升地理信息在相关业务场景中的应用价值，也为后续进一步拓展地理信息可视化应用，如叠加更多地理要素数据、实现复杂的空间分析功能等，奠定坚实的基础。