Spring Boot 结合 Leaflet 实现省级旅游口号 WebGIS 可视化

前言

地理信息系统（GIS）技术在旅游、城市规划等领域展现出巨大的应用潜力。省级旅游口号作为各地旅游宣传的重要名片，传统的宣传方式往往局限于文字、图片等静态形式，难以直观地展现其背后丰富的地理与文化内涵。WebGIS 将 GIS 的强大功能与互联网的便捷性完美结合，而 Spring Boot 和 Leaflet 分别为后端服务架构和前端地图可视化提供了轻量级、高效的解决方案。

本项目旨在通过 Spring Boot 与 Leaflet 的深度结合，构建一个省级旅游口号 WebGIS 可视化平台，将各地的旅游口号与地理空间数据紧密相连，以直观、生动的地图可视化形式呈现给用户。

一、旅游口号信息管理

1、数据库设计

在旅游口号表中，我们需要关联省份信息表，在进行空间信息挖掘时，会自动关联省份空间信息。旅游口号信息表的物理结构如下：

![图片]

这里我们使用 province_code 即省级行政区划代码来进行信息关联。

![图片]

省级旅游口号的列表管理界面如上图所示。

2、空间属性关联

为了方便查询对应的省份信息，以及在 WebGIS 展示过程中快速对省份进行标注，我们需要关联三张空间信息表：省级行政区划信息表、城市基本信息表和旅游口号信息表。三者通过省级行政区划代码来进行数据关联。

数据查询 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, 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

执行上述语句后，可以看到包含城市名称、拼音、坐标及 GeoJSON 数据的关联结果。

二、SpringBoot 后台实现

本节将从系统调用时序、Mapper 数据查询实现以及控制层接口实现分别进行介绍。

1、系统调用时序图

本文采用的系统架构为经典 MVC 三层架构，系统的调用时序如下：

![图片]

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

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 语句与上一节的空间属性关联一致，区别在于这里使用 MyBatis Plus 来执行 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 style='color:" + color + "' class='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++) {
                     areaData = result.[i];
                     color = ();
                    areaLayer = L.(.(areaData.), {
                        : { : color, : color, : , : , :  }
                    }).(collisionLayer);

                     myIcon = L.({
                        : ,
                        : ,
                        : [, ],
                        : [, ],
                        : (i, color, areaData)
                    });

                    showLayerGroup.(areaLayer);
                    
                    L.([areaData., areaData.], { : myIcon }).(collisionLayer);
                    showLayerGroup.(collisionLayer);

                    legendData.({
                        :  + areaData.,
                        : ,
                        : ,
                        : color,
                        : color,
                        : ,
                        : 
                    });
                }
                (legendData);
            }
        },
        : () {
            $.modal.();
        }
    });
}

2、区域旅游口号展示

系统支持不同区域的旅游口号展示，例如东北三省、长三角城市群、珠三角地区及西北地区等。通过地图交互，用户可以查看各省份的具体口号及地理位置分布。

![图片]

四、总结

本文详细介绍了空间表的设计、空间属性的关联、前后端的设计与实现，并展示了代表性省份的宣传口号。通过本项目的实践，探索了 Spring Boot 与 Leaflet 在 WebGIS 领域的应用模式与技术实现路径，为旅游行业的数字化转型提供了一个有益的参考案例。

Spring Boot 结合 Leaflet 实现省级旅游口号 WebGIS 可视化