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

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

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 领域的应用模式与技术实现路径，为旅游行业的数字化转型与创新发展提供了一个有益的参考案例。