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

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 编写，到前端的地图渲染逻辑，形成了一套完整的解决方案。这不仅为游客提供了便捷的规划工具，也为旅游管理部门提供了新的宣传渠道。后续可继续优化功能，拓展更多行业的地理信息可视化应用。