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

Controller 层接口

控制层主要提供两个入口：一个是页面跳转，另一个是返回 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 是一款轻量级开源 JS 库，非常适合这种交互式地图需求。我们利用它来加载 GeoJSON 数据，并用自定义图标展示口号。

核心逻辑

使用 L.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();
                    // 添加省份多边形
                    var 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 领域的可行性。通过 PostGIS 处理空间数据，MyBatis Plus 简化后端开发，Leaflet 实现轻量级前端交互，不仅提升了旅游信息的传播效率，也为行业数字化转型提供了可参考的技术路径。