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

这里的 SQL 逻辑与数据库层面的空间关联保持一致，通过 MyBatis Plus 简化了执行过程。

控制层接口实现

控制器主要提供两个接口：一个是跳转地图页面的入口，另一个是供前端 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 集成实现 WebGIS

省级数据展示及可视化

使用 Leaflet 组件展示省级行政区划范围和旅游口号。对于口号信息，我们使用 DivIcon 进行标绘，示例代码如下：

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 的结合能有效探索 WebGIS 领域的应用模式。这不仅为游客提供了便捷的规划工具，也为旅游管理部门提供了新的推广平台。未来可继续优化功能，拓展更多行业的地理信息可视化应用。