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

地理信息系统（GIS）在旅游行业的应用潜力巨大，尤其是将旅游口号与地理空间数据结合，能直观展示各地旅游资源。本文基于 Spring Boot 后端与 Leaflet 前端，构建一个省级旅游口号 WebGIS 可视化平台，通过地图交互形式呈现口号信息。

一、数据模型设计

为了实现空间关联查询，我们需要管理三张核心表：省级行政区划信息表、城市基本信息表以及旅游口号信息表。它们通过省级行政区划代码进行关联。

旅游口号信息表的物理结构主要包含口号内容、省份代码及活动状态标识。在空间挖掘时，系统会自动关联省份的空间几何信息。这里我们使用 province_code 作为关键关联字段。

文章配图

为了在地图上快速标注省会城市并展示口号，数据库层面需要执行空间属性关联查询。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 几何对象及口号内容的完整数据集。

二、Spring Boot 后台实现

后端采用经典的 MVC 三层架构，利用 MyBatis Plus 简化 SQL 操作，提供稳定的数据接口。

1. Mapper 层数据查询

Mapper 接口中定义了核心查询方法，直接复用上述 SQL 逻辑。通过 @Select 注解动态拼接脚本，确保空间函数能被正确解析。

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();
}

2. 控制层接口实现

Controller 层主要负责路由分发和响应封装。除了跳转地图页面的入口外，核心在于提供一个供前端 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 是一款轻量级开源 JS 库，非常适合用于 WebGIS 开发。本节重点讲解如何将后端数据集成到地图中。

1. 省级数据展示逻辑

对于省级行政区划范围和旅游口号的展示，我们使用 Leaflet 组件。口号信息推荐使用 DivIcon 进行标绘，这样可以灵活定制 HTML 内容。

function buildShowInfo(index, color, data) {
    var result = "<div class='animation-spaceInDown' style='color:" + color + "'><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 ccolor = getRandomColor();
                    var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{
                        style: {color:ccolor, fillColor:ccolor, 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, ccolor, 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: ccolor,
                        fillColor: ccolor,
                        fillOpacity: 0.8,
                        weight: 2
                    });
                }
                initLegend(legendData);
            }
        },
        error: function() {
            $.modal.alertWarning("获取空间信息失败");
        }
    });
}

2. 区域效果展示

系统运行后，不同区域的旅游口号呈现出不同的地域特色。

东北地区：宣传口号透露出北方的质朴与热情，如雪乡等元素。文章配图

长三角城市群：从东三省转到长三角，能感受到江浙的文化底蕴，如水韵江苏、活力浙江等。文章配图

珠三角地区：广西自治区和海南省的口号直抒胸臆，强调风景独好。文章配图

西北地区：位于丝绸之路上的新疆和甘肃，口号中的丝丝关联让人产生旅行冲动。文章配图

四、总结

本项目通过 Spring Boot 与 Leaflet 的深度结合，实现了省级旅游口号的 WebGIS 可视化。从数据库的空间表设计、MyBatis Plus 的 Mapper 编写，到前端的地图渲染逻辑，形成了一套完整的解决方案。这不仅为游客提供了便捷的规划工具，也为旅游管理部门提供了新的宣传渠道。后续可继续优化功能，拓展更多行业的地理信息可视化应用。