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

省级旅游口号 WebGIS 可视化实践

将旅游口号与地理空间数据结合，能更直观地展示地域文化。本项目采用 Spring Boot 搭建后端服务，Leaflet 实现前端地图可视化，完成省级旅游口号的空间关联与展示。

数据层设计与空间关联

核心在于将旅游口号表与地理空间表（省份、城市）进行关联。我们需要三张表：省级行政区划信息表、城市基本信息表、旅游口号信息表。通过省级行政区划代码建立连接。

在数据库中执行空间关联查询时，需提取省会坐标及省份几何图形（GeoJSON）。以下 SQL 展示了如何筛选省会城市并获取对应的口号信息：

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

执行后可获得包含城市经纬度、省份名称及 GeoJSON 几何数据的集合，为前端渲染做准备。

Spring Boot 后端实现

后端采用经典的 MVC 三层架构。Controller 负责接收请求，Service 处理业务逻辑，Mapper 层对接数据库。

Mapper 数据查询

使用 MyBatis Plus 简化 SQL 映射。在 Mapper 接口中定义查询方法，直接复用上述空间关联逻辑：

package com.yelang.project.extend.scenicspot.mapper;

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.TourismSlogansInfoVO;
import java.util.List;

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

控制层接口

控制器暴露两个接口：一个用于跳转地图页面，另一个供前端 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 库加载地图，通过 Ajax 获取后端数据后，动态绘制省份边界及口号标注。

核心渲染逻辑

为了在地图上清晰展示口号，我们使用 DivIcon 自定义标记样式。遍历返回的数据，解析 GeoJSON 绘制省份区域，并在省会位置添加带信息的标记。

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 解决方案。这不仅提升了旅游信息的传播效率，也为行业数字化提供了可复用的技术路径。