Spring Boot + Leaflet 构建省级旅游口号 WebGIS 可视化平台

2、Mapper 数据查询实现

后端使用 MyBatis Plus 简化 SQL 操作。核心在于定义动态 SQL，确保空间函数能正确执行。以下是 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 逻辑与上一节一致，但通过注解方式集成到框架中，提高了开发效率。

3、控制层接口实现

Controller 层主要负责路由分发和响应封装。这里定义了地图页面跳转接口和数据查询接口：

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

接口定义完成后，即可在前端通过 Ajax 获取数据进行渲染。

三、Leaflet 集成实现 WebGIS

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++){
                    var areaData = result.data[i];
                    var color = 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("获取空间信息失败");
        }
    });
}

这段代码的核心在于循环遍历后端返回的数据，解析 GeoJSON 生成区域图层，并为每个省份生成一个带有口号信息的自定义标记。

2、东北三省旅游口号

系统运行效果如下，东北地区口号透着质朴与热情：

3、长三角城市群口号

切换到长三角地区，画面转为诗情画意，能感受到江浙的文化底蕴：

4、珠三角旅游口号

珠三角地区的展示同样直观，广西自治区和海南省的口号直抒胸臆：

5、西北地区旅游口号

西北地区的丝绸之路元素在口号中也有所体现，新疆和甘肃的展示效果如下：

由于篇幅限制，更多省份的口号无法一一展示，但整体架构支持无限扩展。

四、总结

本文详细讲解了从空间表设计、SQL 关联查询到前后端接口开发的全过程。通过 Spring Boot 与 Leaflet 的结合，成功实现了旅游口号的 WebGIS 可视化。这不仅解决了传统静态宣传难以呈现地理分布的问题，也为旅游行业的数字化转型提供了一个可落地的技术参考。后续可在此基础上拓展更多交互功能或接入实时数据。