【国庆要来了】基于Leaflet的旅游路线WebGIS可视化实践

news2024/9/29 22:35:24

前言

        转眼2024年的国庆节马上就要来临了,估计很多小伙伴都计划好了旅游路线。金秋十月,不管是选择出门去看看风景,还是选择在家里看人。从自己生活惯了的城市去别人生活惯了的城市,去感受城市烟火、去感受人文风景,为2024年剩下的时间准备画一个完美的符号吧。在这里首先祝福我们伟大的祖国繁荣昌盛、人民安居乐业,出门旅游的朋友们注意安全,收获一路的好风景和好心情,在家休息的朋友们也自得其乐,自有收获。

        国庆旅游黄金周,全国各地的文旅部门现在都是使出了浑身解数,期待在今年的黄金周中吸引到我们更多的游客。长沙市作为热门的旅游城市,当地的文旅部门也是开始在各个平台进行广泛的宣传和呐喊。包括长沙本地宝在内的一些互联网平台也是推出了2024年的精品旅游路线推荐,根据不同的旅游需求,按照家国情怀、都市休闲、登高品秋、亲子欢乐、寄情山水主题,给大家组织推荐了5条精品的线路。不过官方是给出了旅游景点地名,那么作为一个GIS开发技术人员,我们是否可以结合本专业来进行一种旅游地图的时空碰撞呢?将地名地点利用WebGIS技术在地图上进行展示,进而为不同的路线分析距离、选择适合的交通工具出行等等,从而更精准的为我们的旅游服务和做好旅游参考。

        本文即在此背景之下产生,文章首先结合之前搜集的风景旅游区数据库、还有POI数据库,通过在风景旅游区数据库和POI数据库中根据名称来进行地理编码,找到其对应的经纬度信息,最后基于Leaflet进行时空位置绘制。为各位旅游提供完整的旅游路线预览。

一、应用实例技术实现路径

        这里首先对应用实例涉及的技术进行一个介绍,同时给出实现路径。即如何通过地名地址和风景区数据找出对应的经纬度位置,以及查找出对应的经纬度位置后,如何在Leaflet中进行空间数据的展示。

1、关键实现路径

        根据 上图可以看出,首先我们需要输入景点的名称信息,根据优先级的策略,我们优先查询风景旅游区的图层数据,如果图层中可以查到当前景点,则直接返回景点的位置经纬度。当然,不可避免的是,有一些数据比如餐饮或者网红打卡点,不一定是风景旅游区,因此无法在对应的图层中找到,针对这部分数据,则需要进一步的关联到POI图层中去继续查询。如果能查询到位置信息,则使用POI的经纬度信息,反之则返回为空,如果有第三方接口如天地图的地理编码查询接口服务,则可以调用这个服务来查询出对应的位置的经纬度信息。最后根据返回的经纬度信息在Leaflet中进行可视化。

2、空间数据库查询

        考虑到地名地址的信息不一定是完全准确的,一些名称信息等可能是不全的,如果有能力的话,最好使用分词的模式来进行关键词匹配,合理为了简单起见,暂时使用在数据库中的模糊匹配来实现。如果在生产环境中,则不推荐大家这么用,第一是性能不好,第二个是查询的效果也不是非常准确的。查询的SQL非常简单,这里直接给出查询语句,关于原表的表结构,受限于篇幅原因,这里不进行展开,感兴趣可以私聊或者翻阅之前的博客内容,有详细的介绍。


-- 1、 查询风景区表
select * from biz_scenic_spot t where t.name like '%湘丰%';

-- 2、查询POI信息表
select * from biz_poi_info t where t.name like '%湘丰%';

        在数据库客户端软件执行以上的SQL之后,可以在执行结果页看到以下的信息,

        大家可以在表中找到对应的经纬度字段,将经纬度信息拷贝出来。当然,这里的shp中是包含了经纬度字段,如果大家得到的数据中,没有经纬度信息。怎么进行经纬度信息的提取呢?这里以PostGIS为例,介绍如何使用函数来进行经纬度提取。

-- 2、查询POI信息表
select *,st_x(geom) lon ,st_y(geom) lat from biz_poi_info t where t.name like '%湘丰%';

         使用st_y(geometry)和st_x(geometry)来进行经纬度信息的提取。

二、精品路线的WebGIS可视化实现

        对精品路线的WebGIS展示,我们采用熟悉的Leaflet库来进行实现。如果您对此不熟悉,可以先进行相关知识的学习,同时本文采用的ES5的原生html和Javascript实现,学有余力,大家可以将代码使用新的前端框架,比如Vue或者React来进行实现。

1、界面基本布局简介

        界面的布局其实比较简单,采用的地图加侧边栏的实现方式,居中是地图的主体显示区域,右边配置一个侧边栏组件,在侧边栏中配置一个旅游路线的展示列表,列表下方计划做路线的具体景点展示,推荐旅游路线右边有一个操作按钮,点击按钮会自动切换景点对应的地名以及绘制最新的路线,将所有的景点连接而成。

2、WebGIS可视化实现

         为了将所有的旅游路线在地图上进行展示,我们需要将中文的地名地址转化为经纬度信息。按照上一节的转换步骤,基于我们的时空数据库信息,我们首先来进行查询,当然,后期我们可以采用接口服务的方式进行批量操作。以第一条路线为例:

        其中文路线景点为:

锦绶堂(湖南省苏维埃旧址)——耀邦故居——秋收起义文家市纪念园——田汉文化园——杨开慧故居——雷锋纪念馆——湖南第一师范旧址——湖南自修大学旧址(船山学社)——《湘江评论》旧址(白果园)
		——中共湘区委员会旧址——岳麓山——橘子洲景区(爱晚亭、岳麓书院)——新民学会成立旧址——宁乡石仑关——刘少奇纪念馆——何叔衡谢觉哉故居 

        根据这些地名,经过查询得出的经纬度信息如下:

var lineInfo1 = [{"lon":114.02698979600,"lat":28.46127479202,"name":"锦绶堂(湖南省苏维埃旧址)"},
		{"lon":113.88106756500,"lat":28.08157900607,"name":"耀邦故居"},
		{"lon":113.92577651100,"lat":28.40224145438,"name":"秋收起义文家市纪念园"},
		{"lon":113.20281080000,"lat":28.32460648000,"name":"田汉文化园"},
		{"lon":113.20442230000,"lat":28.59065549000,"name":"杨开慧故居"},
		{"lon":112.83963490000,"lat":28.20735347000,"name":"雷锋纪念馆"},
		{"lon":112.96615573900,"lat":28.17907124211,"name":"湖南第一师范旧址"},
		{"lon":112.97642394000,"lat":28.20314818853,"name":"湖南自修大学旧址(船山学社)"},
		{"lon":112.97237720200,"lat":28.19240549916,"name":"《湘江评论》旧址(白果园)"},
		{"lon":112.95634770000,"lat":28.17855288000,"name":"橘子洲景区"},
		{"lon":112.94699840800,"lat":28.19675004980,"name":"新民学会成立旧址"},
		{"lon":112.66766111600,"lat":28.21943663820,"name":"宁乡石仑关"},
		{"lon":112.64129723900,"lat":28.03827033474,"name":"刘少奇纪念馆"},
		{"lon":112.03729370000,"lat":28.05402452759,"name":"何叔衡谢觉哉故居"}
		];

        最后,将得到的位置和景点信息在leaflet地图上渲染出来,关键代码如下:

 

function openLine1(index){
	showLayerGroup.clearLayers();
	var line1 = new Array();
	$("#lineDetails").html("");
	var detailsInfo = "";
	var data;
	switch(index){
		case 1 :
			data = lineInfo1;
			break;
		case 2:
			data = lineInfo2;
			break;
		case 3:
			data = lineInfo3;
			break;
		case 4:
			data = lineInfo4;
			break;
		case 5:
			data = lineInfo5;
			break;
		default :
			data = lineInfo1;
	}
	for(var i = 0;i < data.length;i++){
		var latlng = new L.latLng(data[i].lat, data[i].lon);
		let marker = L.circleMarker(latlng, {
				radius: 10,
				color: "red",//这里设置的是circleMarker的颜色属性
		}).addTo(showLayerGroup);
		var name = data[i].name;
		marker.bindPopup(name);
		mymap.addLayer(showLayerGroup);
		line1.push([data[i].lat, data[i].lon]);
				
		detailsInfo += "<span style='font-size:15px;color:#178f26;'>"+ (i + 1) + ":"+ name + "<br/></span>";
		$("#lineDetails").html(detailsInfo);
				
		L.polyline([[line1]], {color : "red"}).addTo(showLayerGroup);
		}
		mymap.setView(showLayerGroup.getBounds().getCenter());// 设置地图的中心位置
}

        在上面的代码中,我们不仅展示了所有的旅游路线景点,同时将所有的景点连接起来,形成一条路线。 

三、推荐5条旅游路线展示 

        上面一节讲解如何进行路线的展示,下面我们根据小编的笔触,来深度的解析这5条旅游线路,大美长沙欢迎您,期待你的到来。

1、路线一:家国情怀游

                路线包含地点如下:这是一条包含红色因素的路线,一起去看看前辈们奋战的足迹。

        通过地图可以看到,这条路线距离比较长,覆盖的地区比较多,而且景点之间距离远,比较适合自驾,公共交通不是很方便,但景点非常值得推荐一看。

 2、路线二:都市休闲游

        如果不想太远的长途跋涉,只想就近来一场放松和休闲,那么下面这条都市休闲一定可以满足你的期待。首先来看看包含哪些具体的景点:

        想看湖南的文脉和风骨,去岳麓山走走,大学城的郎朗读书声中,还回荡着当年薛岳将军和将士们与日寇浴血奋战的厮杀声,听千年学府岳麓书院,连接了古今的文化传奇。到了夜晚再沿着湘江,乘坐橘洲之星,溯江而上,在橘子洲头,浪遏飞舟,感受伟大领袖毛主席的慷慨激昂。在黄兴路步行街,感受长沙city,在太平老街,品饕餮美食。在都市中,放下疲惫的身躯。 

        这条路线,基本是在长沙城区的核心区域,不必担心路程太远,出门不远就是地铁站,可以让您无缝换乘,一站直达。适合在室内转转,看看这座城市的风味。

 3、路线三:等高品秋游

        秋天是个油画大师,对色彩尤其的偏爱。不信你看远山,五彩斑斓的色彩铺满了大地,把大自然渲染得令人如此如醉。喜欢自驾的朋友,不妨趁着7天的长假,带着家人或者伙伴,大家结伴而行。走出钢筋森林城市,去登高,去赏秋,看大自然这位大家是如何描绘今年的美丽景象。

湘赣边(浏阳)文化艺术交流中心——浏阳天空剧院——秋收起义纪念园——苍坊旅游区——画里小河生态旅游区——道官冲非遗生态村——大围山国家森林公园——围山云起民宿——周洛大峡谷景区——浏阳石牛寨景区 。

4、路线四:亲子欢乐游 

        家有孩童,不知道如何选择路线。本地宝已经帮忙安排了一条路线,适合带着家里的宝贝们出行,温馨提醒,路线较远,需要提前规划交通。景区的表演还是非常值得期待。

季高兔窝窝——大王山旅游度假区——黑麋峰国家森林公园——铜官窑文化旅游度假区——五号山谷隐世民宿——2.0版靖港古镇——稻花香里农耕文化园——炭河里国家考古遗址公园——沩山密印景区——灰汤温泉国家旅游度假区——足迹岛星空民宿

5、路线五:寄情山水游 

        如果假期没来得及去看看辛追娭毑,那么国庆还是可以安排的哦。这里推荐一条线路,包含了湖南博物馆,看看大湖南的灿烂文化。也可以寄情于山水,和松雅湖国家湿地公园、大山冲森林公园、影珠山来个约会。

长沙滨江文化园——湖南博物院——潮宗街——空空客厅民宿——长沙园林生态园——松雅湖国家湿地公园——大山冲森林公园——影珠山——桐乐·影山居民宿——杨开慧纪念馆——湘丰茶业庄园 

        相对而言,这条路线是一条一路向北的路线,从长沙主城出发,一路向北。

        好了,以上就是分享的5条适合2024年国庆出游的旅游路线,趁着假期,一起出去转转吧。不管外来的朋友还是本地的朋友,都希望大家在这个假期中有个愉快的旅程,在每一次的旅程中,收获开心与快乐。        

四、总结

        以上就是本文的主要内容,文章首先结合之前搜集的风景旅游区数据库、还有POI数据库,通过在风景旅游区数据库和POI数据库中根据名称来进行地理编码,找到其对应的经纬度信息,最后基于Leaflet进行时空位置绘制。为各位旅游提供完整的旅游路线预览。行文仓促,难免有不足之处,如有不足,还恳请各位专家博主在评论区留下真知灼见,不甚感激。

        文章部分图源和旅游路线推荐来源于长沙本地宝制作的2024年国庆长沙旅游路线,原文:

国庆来长沙,5条游玩路线推荐!不同类型,值得一逛,祝大家接入愉快。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2177988.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows环境 源码编译 FFmpeg

记录一下windows环境纯代码编译ffmeg的过程&#xff01; 目录 一、安装MSYS2 1.下载安装 2.配置 3.修改源 4.测试与更新 二、安装其他必要工具 1.安装MinGW-w64 2.安装git 3..安装make等工具 4.编译前的其他准备工作 ①.重命名link.exe ②.下载和安装YASM ③.安装…

ADC的原理

一、介绍 模数转换&#xff0c;即Analog-to-Digital Converter&#xff0c;常称ADC&#xff0c;是指将连续变量的模拟信号转换为离散的数字信号的器件&#xff0c;比如将模温度感器产生的电信号转为控制芯片能处理的数字信号0101&#xff0c;这样ADC就建立了模拟世界的传感器和…

tomcat服务器控制台乱码(超简单,其中一种方式)

一、问题 为解决前&#xff1a; 是这样子&#xff0c;控制台中文乱码 解决后&#xff1a; 二、解决 在tomcat的安装目录下&#xff0c;找到conf ---》logging.properties 点击去进行编辑 重点&#xff01;&#xff01;&#xff01; 编辑完之后&#xff0c;保存 如何返回到…

文献阅读9.29

目录 基于物理的神经网络在河流淤积模拟中的应用 文献摘要 讨论|结论 理论介绍 PINN 实验方程 Ansys中的数学模型 实验设置 基于物理的神经网络在河流淤积模拟中的应用 文献摘要 本文从水动力学和污染物运移动力学的基本原理出发&#xff0c;全面探讨了用于研究泥沙淤…

六、动画系统

一、动画事件 在此处实现&#xff1a;动画播放至此处&#xff0c;人物角色移动 1、添加动画事件 选择对应的动画 右键动画部分&#xff0c;选择添加动画事件 在人物身上挂载了对应的动画系统&#xff0c;需要在代码中&#xff0c;设置一个函数&#xff0c;作为动画事件 执行…

【ADC】使用仪表放大器驱动 SAR 型 ADC 时的输入输出范围

概述 本文学习于TI 高精度实验室课程&#xff0c;介绍使用仪表放大器时 SAR ADC 驱动放大器的注意事项。具体包括&#xff1a;介绍如何使用仪表放大器设计数据转换器驱动电路。 仪表放大器&#xff08;Instrumentation Amplifier&#xff0c;下文简称 INA&#xff09;可抑制输…

自定义knife4j访问路径

文章目录 本文档只是为了留档方便以后工作运维&#xff0c;或者给同事分享文档内容比较简陋命令也不是特别全&#xff0c;不适合小白观看&#xff0c;如有不懂可以私信&#xff0c;上班期间都是在得 原由&#xff0c;嫌弃doc.html 太大众 直接重定向&#xff0c;直接上代码了 p…

【Linux】Linux内核结构基础

Linux内核结构基础 一、Linux内核结构介绍二、Linux内核结构☆ Linux内核结构框图Linux系统架构 三、认识驱动为什么学驱动文件名与设备号open函数过程实例详解 四、shellshell脚本 参考博文&#xff1a; 【Linux】内核结构&#xff08;全&#xff09;linux内核结构介绍&#…

理解Python闭包概念

闭包并不只是一个python中的概念&#xff0c;在函数式编程语言中应用较为广泛。理解python中的闭包一方面是能够正确的使用闭包&#xff0c;另一方面可以好好体会和思考闭包的设计思想。 1.概念介绍 首先看一下维基上对闭包的解释&#xff1a; 在计算机科学中&#xff0c;闭包…

【动态规划-分组背包】【hard】力扣2218. 从栈中取出 K 个硬币的最大面值和

一张桌子上总共有 n 个硬币 栈 。每个栈有 正整数 个带面值的硬币。 每一次操作中&#xff0c;你可以从任意一个栈的 顶部 取出 1 个硬币&#xff0c;从栈中移除它&#xff0c;并放入你的钱包里。 给你一个列表 piles &#xff0c;其中 piles[i] 是一个整数数组&#xff0c;分…

OpenEuler虚拟机安装保姆级教程 | 附可视化界面

0x00 系统介绍 在 2019 年 7 月 19 日&#xff0c;华为宣布要在年底正式开源 openEuler 操作系统&#xff1b;在半年后的 12 月 31 日&#xff0c;华为正式开源了 openEuler 操作系统&#xff0c;邀请社区开发者共同来贡献。 一年后&#xff0c;截止到 2020 年12 月 25日&…

注册中心Eureka

Eureka 文章目录 前言一、Eureka是什么&#xff1f;二、使用步骤1.搭建一个SpringCloud项目2.启动类上增加注解 EnableEurekaServer3.启动项目 访问 配置文件里定义的端口号4.启动成功访问 localhost:70005.以同样的方式创建子项目 eureka-client-xx 作为 服务客户端 然后向eur…

实用SQL小总结

WHERE 条件 column 为纯英文字符 或 不包含任何字符 语法&#xff1a; SELECT * FROM your_table WHERE REGEXP(your_column,^[A-Za-z]$); SELECT * FROM your_table WHERE NOT REGEXP(your_column,^[A-Za-z]$);例&#xff1a; SELECT DISTINCT t.pldlibho FROM kibb_pldlyw…

gRPC基础讲解

一、gRPC原理 1、什么是RPC RPC 即远程过程调用协议&#xff08;Remote Procedure Call Protocol&#xff09;&#xff0c;可以让我们像调用本地函数一样发起远程调用。RPC 凭借其强大的治理功能&#xff0c;成为解决分布式系统通信问题的一大利器。 gRPC是一个现代的、高性能…

电路学习——反激电源(2024.09.29)

参考链接1: XXX 在此感谢各位前辈大佬的总结&#xff0c;写这个只是为了记录学习大佬资料的过程&#xff0c;内容基本都是搬运的大佬博客&#xff0c;觉着有用自己搞过来自己记一下&#xff0c;如果有大佬觉着我搬过来不好&#xff0c;联系我删。 电路学习——反激电源&#xf…

基于大数据的高校新生数据可视化分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

生信科研,教授(优青)团队一站式指导:高通量测序技术--农业植物基因组分析、组蛋白甲基化修饰、DNA亲和纯化测序、赖氨酸甲基化

组蛋白甲基化修饰工具(H3K4me3 ChIP-seq) 组蛋白甲基化类型也有很多种&#xff0c;包括赖氨酸甲基化位点H3K4、H3K9、H3K27、H3K36、H3K79和H4K20等。组蛋白H3第4位赖氨酸的甲基化修饰(H3K4)在进化上高度保守&#xff0c;是被研究最多的组蛋白修饰之一。 DNA亲和纯化测序 DNA亲…

QT设计中文输入法软键盘DLL给到C#开发步骤

开发目的&#xff1a;本文提供解决触摸屏C#程序中无法输入中文问题&#xff0c;中文拼音采用开源的谷歌输入法程序、使用QT编译中文输入法界面和中文输入法接口给到C#使用。 开发步骤&#xff1a; 1、QT中设计字母和字符输入界面 2、QT中设计数字输入界面 3、QT中封装调用谷歌…

神秘“蓝莓“模型横空出世:AI文生图界的新霸主还是营销噱头?

Ai 智能办公利器 - Ai-321.com AI文生图领域近日风起云涌&#xff0c;“蓝莓”模型横空出世&#xff0c;迅速占领行业制高点&#xff0c;成为万众瞩目的焦点。这个神秘而强大的模型&#xff0c;在众多AI竞技高手中脱颖而出&#xff0c;一举超越了OpenAI的“草莓”、Flux.1等强…

基于springboot+小程序的儿童预防接种预约管理系统(疫苗1)(源码+sql脚本+视频导入教程+文档)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 本儿童预防接种预约微信小程序可以实现管理员和用户。 1、管理员功能有个人中心&#xff0c;用户管理&#xff0c;儿童信息管理&#xff0c;疫苗信息管理&#xff0c;儿童接种管理&#x…