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

本文采用的系统架构遵循经典的 MVC 三层模式。前端用户发起页面访问请求，转发到后台控制器；控制器中的响应方法调用旅游口号 Service 的查询方法，进而调用 Mapper 层的省级旅游对象查询方法。查询到数据后，依次向上传递，最终将后台返回的数据与旅游宣传口号在地图上渲染出来。

2. Mapper 数据查询实现

全国省份旅游口号查询的核心逻辑封装在 Mapper 接口中。这里使用 MyBatis Plus 来简化 SQL 的执行，配置的 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();
}

3. 控制层接口实现

控制层的实现相对直接，主要包含两个方法：一个是跳转到地图界面的路由，另一个是供前端 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 是一款专注于为 Web 应用提供轻量级、高性能地图可视化解决方案的开源 JavaScript 库。它易于集成且功能丰富，能够轻松实现地图的交互式展示、地理数据的可视化渲染以及各种地图功能的定制开发。

1. 省级数据展示及可视化

对于省级行政区划范围和旅游口号的展示，我们采用 Leaflet 组件。口号信息使用 DivIcon 进行标绘，这样可以在地图上自定义 HTML 内容。

以下是参考的示例代码，展示了如何构建图标并加载数据：

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

2. 东北三省旅游口号

首先来看东北地区的省份旅游口号，系统运行效果如下：

东北三省的宣传口号中透露着浓浓的雪乡味道，也足见北方的那份质朴和热情。

3. 长三角城市群口号

再来看一下长三角地区省份的旅游口号，从东三省转到长三角，一下子来到了诗情画意的江浙地区。

从水韵江苏、诗意江南到活力浙江，能感受到江浙深厚的文化底蕴。

4. 珠三角旅游口号

来到珠三角地区，广西自治区和海南省的口号直抒胸臆，展现了风景这边独好的魅力。

5. 西北地区旅游口号

最后来看看西北地区的旅游口号，位于丝绸之路上的新疆和甘肃，口号中的丝丝关联，让人不禁想开启一场旅行。

当然，由于篇幅限制，其他更多的省旅游口号无法一一展示。

四、总结

本文详细讲解了空间表的设计、空间属性的关联、前后端的设计与实现，并最终选取了一些有代表性的省份进行宣传口号的展示。通过本项目的实践，不仅探索了 Spring Boot 与 Leaflet 在 WebGIS 领域的应用模式与技术实现路径，更深刻体会到了技术融合创新为旅游行业带来的变革力量。这个平台旨在成为连接游客与各地旅游目的地的桥梁，让更多人了解中国丰富多彩的旅游资源，同时也为旅游行业的数字化转型提供一个有益的参考案例。