基于 Spring Boot 与 Leaflet 的省级旅游口号 WebGIS 可视化实现

以上就是在数据库中将三张表的信息进行空间关联查询的实现。

二、SpringBoot 后台实现

Spring Boot 以其简洁、高效的特性深受开发者的青睐，能够快速搭建起稳定、高效的后端服务架构，为 WebGIS 系统的数据处理与业务逻辑实现提供了坚实的支撑。本节将从系统调用时序和 Mapper 数据查询实现以及控制层接口实现分别来进行介绍。

1、系统调用时序图

本文采用的系统架构比较简单，使用经典 MVC 三层架构，系统的调用时序图如下图所示：

前端用户发起页面访问，将页面请求转发到后台的控制器中，控制器中的响应方法会调用旅游口号 service 的查询方法，再继续调用数据库查询对象的省级旅游对象查询方法，在查询到数据以后再依次往上一层传递。最终把后台返回的数据和旅游宣传口号在地图上展示出来。

2、Mapper 数据查询实现

全国省份旅游口号查询方法核心代码如下：

package com.yelang.project.extend.scenicspot.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.scenicspot.domain.TourismSlogansInfo;
import com.yelang.project.extend.scenicspot.domain.TourismSlogansInfoVO;

public interface TourismSlogansInfoMapper extends BaseMapper<TourismSlogansInfo>{
    static final String FIND_PROVINCE_TOURISMSLOGANS_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,slogan.slogan,st_asgeojson ( tc.geom ) geomJson " +
        " FROM biz_geographic_name T,biz_province tc,biz_tourism_slogans_info slogan " +
        " WHERE T.bz IN ( '省会城市', '直辖市', '首都' ) AND st_contains ( tc.geom, T.geom ) AND slogan.province_code = tc.code AND slogan.activity_flag = 1 " +
        "</script>";

    @Select(FIND_PROVINCE_TOURISMSLOGANS_LIST)
    List<TourismSlogansInfoVO> findProvinceTourismSlogans();
}

这里的查询方法所配置的 sql 语句与上一节的空间属性关联一致，功能是一样的，区别就是这里使用 MybatisPlus 来进行 SQL 语句的执行。

3、控制层接口实现

控制层的实现比较简单，首先需要有一个跳转到地图界面的方法，然后需要提供一个供前端 ajax 调用的方法，用于返回全国的省级旅游口号列表，核心方法如下：

@RequiresPermissions("sspot:tourismslogans:map")
@GetMapping("/map")
public String map(){
    return prefix + "/map";
}

@RequiresPermissions("sspot:tourismslogans:list")
@GetMapping("/maplist")
@ResponseBody
public AjaxResult mapList(){
    List<TourismSlogansInfoVO> result = tourismslogansService.findProvinceTourismSlogans();
    return AjaxResult.success().put("data", result);
}

通过以上的代码，我们就定义好了后端的服务接口，下面就可以使用 Leaflet 来进行调用，将获取的数据集成到 Leaflet 中进行展示。

三、Leaflet 集成实现 WebGIS

Leaflet 是一款开源的 JavaScript 库，专注于为 Web 应用提供轻量级、高性能的地图可视化解决方案，它易于集成、功能丰富，能够轻松实现地图的交互式展示、地理数据的可视化渲染以及各种地图功能的定制开发。本节将重点讲解使用 Leaflet 对各个省份的旅游口号展示效果。

1、省级数据展示及可视化

对省级行政区划范围和旅游口号的展示采用我们常用的 Leaflet 组件，口号信息我们使用 DivIcon 来进行标绘，之前展示了很多相关的内容，下面给出一个参考的示例代码：

function buildShowInfo(index,color,data){
    var result = "<div + color + \";\' animation-spaceInDown><div>" + (index + 1) + "、" + data.provinceName +"<span></span></div>";
    result += "<div>省会:"+data.cityName +"/" + data.provinceCode + "<span></span></div>";
    result += "<div>口号:"+data.slogan+ "<span></span></div>";
    result += "</div>";
    return result;
}

function previewProvince(){
    $.ajax({
        type:"get",
        url:prefix + "/maplist",
        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();
                    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.provinceName, type: "rectangle", radius: 12, color: color, fillColor: color, fillOpacity: 0.8, weight: 2});
                }
                initLegend(legendData);
            }
        },
        error:function(){
            $.modal.alertWarning("获取空间信息失败");
        }
    });
}

2、东北三省旅游口号

首先来看一下东北地区的省份旅游口号，系统运行效果图如下：

东北三省的宣传口号中透露着浓浓的雪乡的味道，也足见北方的那份质朴和热情。

3、长三角城市群口号

再来看一下长三角地区省份的旅游口号，从东三省转到长三角，一下子来到了诗情画意的江浙地区。从水韵江苏、诗意江南到诗意江南，活力浙江，能感受到江浙的文化底蕴。

4、珠三角旅游口号

来到珠三角地区，广西自治区和海南省的口号直接就要把人接走了，妥妥的风景这边独好的直抒胸臆。

5、西北地区旅游口号

最后来看看西北地区的旅游口号，位于丝绸之路上的新疆和甘肃，口号中的丝丝关联，让我们此时已经恨不得开启一场旅行了。当然其它更多的省的旅游口号受限篇幅，不能一一全都展示。

四、总结

本文通过详细的讲解空间表的设计、空间属性的关联、前后端的设计与实现，最终选取了一些有代表性的省份进行宣传口号的展示。通过本项目的实践，探索了 Spring Boot 与 Leaflet 在 WebGIS 领域的应用模式与技术实现路径，体会到了技术融合创新为旅游行业带来的变革力量。该平台能够成为连接游客与各地旅游目的地的桥梁，让更多的人了解中国丰富多彩的旅游资源，激发他们的旅行热情，同时也为旅游行业的数字化转型与创新发展提供了一个有益的参考案例。