Spring Boot携手Leaflet，点亮省级旅游口号WebGIS可视化之路

目录

前言

一、旅游口号信息管理

1、写在前面的

2、空间属性关联

二、SpringBoot后台实现

1、系统调用时序图

2、Mapper数据查询实现

3、控制层接口实现

三、Leaflet集成实现WebGIS

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

2、东北三省旅游口号

3、长三角城市群口号

4、珠三角旅游口号

5、西北地区旅游口号

四、总结

---

前言

        在当今数字化浪潮汹涌澎湃的时代，地理信息系统（GIS）技术正以前所未有的速度改变着我们对世界的认知与探索方式。它不仅为科学研究提供了强大的工具，更在旅游、城市规划、环境保护等诸多领域展现出巨大的应用潜力。而当我们将目光聚焦于旅游行业，一个充满活力与创新的领域，GIS技术的应用更是如鱼得水，为旅游体验的提升和旅        游管理的优化带来了全新的机遇。

        省级旅游口号作为各地旅游宣传的重要名片，承载着地域文化的精髓与旅游资源的亮点，是吸引游客、塑造旅游品牌形象的关键要素。然而，传统的旅游口号宣传方式往往局限于文字、图片等静态形式，难以直观地展现其背后丰富的地理与文化内涵。游客在规划旅行时，常常难以快速、全面地了解各地旅游口号所蕴含的独特魅力与旅游资源分布，这在一定程度上限制了旅游宣传的效果与游客的出行体验。随着Web技术的飞速发展，WebGIS应运而生，它将GIS的强大功能与互联网的便捷性完美结合，为地理信息的展示与共享提供了全新的平台。而Spring Boot作为一款轻量级的Java开发框架，以其简洁、高效的特性深受开发者的青睐，能够快速搭建起稳定、高效的后端服务架构，为WebGIS系统的数据处理与业务逻辑实现提供了坚实的支撑。Leaflet则是一款开源的JavaScript库，专注于为Web应用提供轻量级、高性能的地图可视化解决方案，它易于集成、功能丰富，能够轻松实现地图的交互式展示、地理数据的可视化渲染以及各种地图功能的定制开发，与Spring Boot搭配使用。

        基于这样的背景与需求，我们开启了“Spring Boot携手Leaflet，点亮省级旅游口号WebGIS可视化之路”的探索之旅。本项目旨在通过Spring Boot与Leaflet的深度结合，构建一个省级旅游口号WebGIS可视化平台，将各地的旅游口号与地理空间数据紧密相连，以直观、生动的地图可视化形式呈现给用户。用户可以通过该平台，快速浏览全国各省份的旅游口号。这不仅为游客提供了更加便捷、个性化的旅游规划工具，也为各地旅游管理部门提供了一个全新的宣传推广平台，有助于提升旅游口号的传播效果与旅游目的地的知名度。

一、旅游口号信息管理

        在之前的系列内容开发过程中，我们深入研究了Spring Boot的架构设计，利用其强大的依赖管理和自动化配置功能，快速搭建起后端服务模块，实现了旅游口号数据的存储、查询、更新等基础功能，以及与地理空间数据库的无缝对接，确保了地理数据的高效处理与准确传输。本节为了照顾第一次看到本文的朋友，依然将之前的系列内容进行简单介绍，让大家有一个直观地了解。

1、写在前面的

        在上一篇博文SpringBoot结合PostGIS在省级旅游口号管理中的应用实践中，我们对于如何管理省级旅游口号进行了详细的讲解，这里直接给出设计的表字段。在旅游口号表中，我们只需要关联省份信息表，在进行空间信息挖掘时，会自动的关联省份空间信息。旅游口号信息表的物理结构如下：

        这里我们使用province_code即省级行政区划代码来进行信息关联。

        省级旅游口号的列表管理界面如上图所示。

2、空间属性关联

        为了方便查询对应的省份信息，以及在WebGIS展示过程中，我们可以在省会城市中快速对省份进行标注，这里我们需要关联两张空间信息表。第一张是省级行政区划信息表，第二张是城市基本相信息表，第三张是旅游口号信息表。三者通过省级行政区划代码来进行数据关联，数据查询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 
FROMbiz_geographic_name T,biz_province tc,biz_tourism_slogans_info slogan 
WHERET.bz IN ( '省会城市', '直辖市', '首都' ) AND st_contains ( tc.geom, T.geom ) AND slogan.province_code = tc.code AND slogan.activity_flag = 1

        在Navicat等数据库客户端中执行上述语句后，可以看到以下结果：

        以上就是在数据库中将三张表的信息进行空间关联查询的实现。

二、SpringBoot后台实现

        Spring Boot作为一款轻量级的Java开发框架，以其简洁、高效的特性深受开发者的青睐，能够快速搭建起稳定、高效的后端服务架构，为WebGIS系统的数据处理与业务逻辑实现提供了坚实的支撑。本节将从系统调用时序和Mapper数据查询实现以及控制层接口实现分别来进行介绍。

1、系统调用时序图

        本文采用的系统架构比较简单，使用经典MVC三层架构，系统的调用时序图如下图所示：

        前端用户发起页面访问，将页面请求转发到后台的控制器中，控制器中的响应方法会调用旅游口号service的查询方法，再继续调用数据库查询对象的省级旅游对象查询方法，在查询到数据以后再依次往上一层传递。最终把后台返回的数据和旅游宣传口号在地图上展示出来。

2、Mapper数据查询实现

        全国省份旅游口号查询方法核心代码如下：

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语句与上一节的空间属性关联一致，功能是一样的，区别就是这里使用MybatisPlus来进行SQL语句的执行。

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中进行展示。

三、Leaflet集成实现WebGIS

        Leaflet是一款开源的JavaScript库，专注于为Web应用提供轻量级、高性能的地图可视化解决方案，它易于集成、功能丰富，能够轻松实现地图的交互式展示、地理数据的可视化渲染以及各种地图功能的定制开发。本节将重点讲解使用Leaflet对各个省份的旅游口号展示效果。

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

        对省级行政区划范围和旅游口号的展示采用我们常用的Leaflet组件，口号信息我们使用DivIcon来进行标绘，之前展示了很多相关的内容，下面给出一个参考的示例代码：

 

function buildShowInfo(index,color,data){var result = "<div class='marsBlackPanel' style='background:" + color + ";' animation-spaceInDown><div class='marsBlackPanel-text'>" + (index + 1) + "、" + data.provinceName +"<span class='temperature'></span></div>";result += "<div class='marsBlackPanel-text'>省会:"+data.cityName +"/" + data.provinceCode + "<span class='temperature'></span></div>";result += "<div class='marsBlackPanel-text'>口号:"+data.slogan+ "<span class='temperature'></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 = ccolor = 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("获取空间信息失败");}});
}

2、东北三省旅游口号

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

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

3、长三角城市群口号

        再来看一下长三角地区省份的旅游口号，从东三省转到长三角，一下子来到了诗情画意的江浙地区。从水韵江苏、诗意江南到诗意江南，活力浙江，能感受到江浙的文化底蕴。

4、珠三角旅游口号

        来到珠三角地区，广西自治区和海南省的口号直接就要把人接走了，妥妥的风景这边独好的直抒胸臆。

5、西北地区旅游口号

        最后来看看西北地区的旅游口号，位于丝绸之路上的新疆和甘肃，口号中的丝丝关联，让我们此时已经恨不得开启一场旅行了。当然其它更多的省的旅游口号受限篇幅，不能一一全都展示。

四、总结

        以上就是本文的主要内容，本文通过详细的讲解空间表的设计、空间属性的关联、前后端的设计与实现，最终选取了一些有代表性的省份进行宣传口号的展示。通过本项目的实践，我们不仅探索了Spring Boot与Leaflet在WebGIS领域的应用模式与技术实现路径，更深刻体会到了技术融合创新为旅游行业带来的变革力量。我们期待这个平台能够成为连接游客与各地旅游目的地的桥梁，让更多的人了解中国丰富多彩的旅游资源，激发他们的旅行热情，同时也为旅游行业的数字化转型与创新发展提供一个有益的参考案例。在未来的道路上，我们将继续探索与创新，不断优化平台功能，拓展应用领域，让Spring Boot携手Leaflet，为更多行业的地理信息可视化应用点亮前行之路。