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

前言

地理信息系统（GIS）技术正在改变我们对世界的认知方式，尤其在旅游行业，它能显著提升游客体验和管理效率。省级旅游口号作为地域文化的载体，传统宣传方式难以直观展现其背后的地理与文化内涵。WebGIS 将 GIS 功能与互联网结合，而 Spring Boot 提供高效的后端支撑，Leaflet 则负责轻量级的地图可视化。本项目旨在通过这两者的深度结合，构建一个省级旅游口号 WebGIS 可视化平台，让用户能直观浏览全国各省份的旅游口号。

旅游口号信息管理

空间属性关联

为了在 WebGIS 中快速标注省份并查询对应信息，我们需要关联三张表：省级行政区划信息表、城市基本信息表和旅游口号信息表。三者通过省级行政区划代码进行关联。核心查询逻辑如下：

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

执行上述语句后，即可获取包含城市坐标、省份名称及旅游口号的结构化数据，便于后续渲染。

SpringBoot 后台实现

系统架构

采用经典的 MVC 三层架构，前端请求转发至控制器，调用 Service 层处理业务逻辑，最终由 Mapper 层执行数据库查询。数据返回后，前端将其映射到地图上展示。

Mapper 数据查询实现

利用 MyBatis Plus 封装 SQL 查询，核心代码如下：

package com.yelang.project.extend.scenicspot.mapper;
import java.util.List;
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.TourismSlogansInfo;
import com.yelang.project.extend.scenicspot.domain.TourismSlogansInfoVO;

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

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