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

控制层提供两个接口：一个用于跳转地图页面，另一个返回 JSON 数据供前端 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 库加载地图数据。利用 DivIcon 自定义标记样式，展示省份名称、省会及口号。 核心 JS 逻辑如下：

function buildShowInfo(index,color,data){
    var result = "<div style='color:" + color + "; animation: slideInDown'><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("获取空间信息失败");
        }
    });
}

运行效果覆盖了东北、长三角、珠三角及西北地区，不同区域的口号风格各异，直观展示了旅游资源分布。

总结

本项目实现了 Spring Boot 与 Leaflet 的无缝集成，完成了从数据库空间查询到前端可视化的完整链路。这种模式不仅适用于旅游口号展示，也可为其他地理信息的数字化管理提供参考。