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

前言

        转眼2024年的国庆节立刻就要来临了，估计许多小伙伴都筹划好了旅游路线。金秋十月，不管是选择出门去看看风景，还是选择在家里看人。从自己生存惯了的都会去别人生存惯了的都会，去感受都会烟火、去感受人文风景，为2024年剩下的时间准备画一个完美的符号吧。在这里起首祝福我们巨大的祖国繁荣昌盛、人民安居乐业，出门旅游的朋侪们注意安全，收获一起的好风景和好心情，在家休息的朋侪们也自得其乐，自有收获。
        国庆旅游黄金周，全国各地的文旅部门现在都是使出了浑身解数，等待在今年的黄金周中吸引到我们更多的游客。长沙市作为热门的旅游都会，当地的文旅部门也是开始在各个平台进行广泛的宣传和哗闹。包括长沙本地宝在内的一些互联网平台也是推出了2024年的精品旅游路线推荐，根据差别的旅游需求，按照家国情怀、都市休闲、登高品秋、亲子欢乐、寄情山水主题，给大家构造推荐了5条精品的线路。不过官方是给出了旅游景点地名，那么作为一个GIS开发技能人员，我们是否可以结合本专业来进行一种旅游舆图的时空碰撞呢？将地名地点利用WebGIS技能在舆图上进行展示，进而为差别的路线分析距离、选择适合的交通工具出行等等，从而更精准的为我们的旅游服务和做好旅游参考。

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

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

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

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

2. -- 1、 查询风景区表
3. select * from biz_scenic_spot t where t.name like '%湘丰%';
5. -- 2、查询POI信息表
6. select * from biz_poi_info t where t.name like '%湘丰%';

复制代码

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

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

1. -- 2、查询POI信息表
2. 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可视化实现

         为了将全部的旅游路线在舆图上进行展示，我们需要将中文的地名地址转化为经纬度信息。按照上一节的转换步调，基于我们的时空数据库信息，我们起首来进行查询，固然，后期我们可以采用接口服务的方式进行批量操作。以第一条路线为例：
        此中文路线景点为：

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

复制代码

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

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

复制代码

        末了，将得到的位置和景点信息在leaflet舆图上渲染出来，关键代码如下：
 

1. function openLine1(index){
2.         showLayerGroup.clearLayers();
3.         var line1 = new Array();
4.         $("#lineDetails").html("");
5.         var detailsInfo = "";
6.         var data;
7.         switch(index){
8.                 case 1 :
9.                         data = lineInfo1;
10.                         break;
11.                 case 2:
12.                         data = lineInfo2;
13.                         break;
14.                 case 3:
15.                         data = lineInfo3;
16.                         break;
17.                 case 4:
18.                         data = lineInfo4;
19.                         break;
20.                 case 5:
21.                         data = lineInfo5;
22.                         break;
23.                 default :
24.                         data = lineInfo1;
25.         }
26.         for(var i = 0;i < data.length;i++){
27.                 var latlng = new L.latLng(data[i].lat, data[i].lon);
28.                 let marker = L.circleMarker(latlng, {
29.                                 radius: 10,
30.                                 color: "red",//这里设置的是circleMarker的颜色属性
31.                 }).addTo(showLayerGroup);
32.                 var name = data[i].name;
33.                 marker.bindPopup(name);
34.                 mymap.addLayer(showLayerGroup);
35.                 line1.push([data[i].lat, data[i].lon]);
36.                                
37.                 detailsInfo += "<span style='font-size:15px;color:#178f26;'>"+ (i + 1) + ":"+ name + "<br/></span>";
38.                 $("#lineDetails").html(detailsInfo);
39.                                
40.                 L.polyline([[line1]], {color : "red"}).addTo(showLayerGroup);
41.                 }
42.                 mymap.setView(showLayerGroup.getBounds().getCenter());// 设置地图的中心位置
43. }

复制代码

        在上面的代码中，我们不但展示了全部的旅游路线景点，同时将全部的景点连接起来，形成一条路线。 
三、推荐5条旅游路线展示 

        上面一节解说如何进行路线的展示，下面我们根据小编的笔触，来深度的解析这5条旅游线路，大美长沙欢迎您，等待你的到来。
1、路线一：家国情怀游

                路线包罗地点如下：这是一条包罗赤色因素的路线，一起去看看前辈们奋战的足迹。

        通过舆图可以看到，这条路线距离比较长，覆盖的地域比较多，而且景点之间距离远，比较适合自驾，公共交通不是很方便，但景点非常值得推荐一看。
 2、路线二：都市休闲游

        假如不想太远的远程跋涉，只想就近来一场放松和休闲，那么下面这条都市休闲一定可以满足你的等待。起首来看看包罗哪些详细的景点：

        想看湖南的文脉和风骨，去岳麓山走走，大学城的郎朗读书声中，还回荡着当年薛岳将军和将士们与日寇浴血奋战的厮杀声，听千年学府岳麓书院，连接了古今的文化传奇。到了夜晚再沿着湘江，乘坐橘洲之星，溯江而上，在橘子洲头，浪遏飞舟，感受巨大领袖毛主席的慷慨激昂。在黄兴路步行街，感受长沙city，在太平老街，品饕餮美食。在都市中，放下疲惫的身躯。 
        这条路线，根本是在长沙城区的核心地区，不必担心旅程太远，出门不远就是地铁站，可以让您无缝换乘，一站直达。适合在室内转转，看看这座都会的风味。

 3、路线三：等高品秋游

        秋日是个油画大师，对色彩尤其的偏幸。不信你看远山，五彩斑斓的色彩铺满了大地，把大自然渲染得令人云云如醉。喜好自驾的朋侪，不妨趁着7天的长假，带着家人大概伙伴，大家结伴而行。走出钢筋森林都会，去登高，去赏秋，看大自然这位大家是如何描绘今年的漂亮情形。

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

4、路线四：亲子欢乐游 

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

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

5、路线五：寄情山水游 

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

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

        相对而言，这条路线是一条一起向北的路线，从长沙主城出发，一起向北。
        好了，以上就是分享的5条适合2024年国庆出游的旅游路线，趁着假期，一起出去转转吧。不管外来的朋侪还是本地的朋侪，都希望大家在这个假期中有个愉快的旅程，在每一次的旅程中，收获开心与快乐。        
四、总结

        以上就是本文的重要内容，文章起首结合之前搜集的风景旅游区数据库、还有POI数据库，通过在风景旅游区数据库和POI数据库中根据名称来进行地理编码，找到其对应的经纬度信息，末了基于Leaflet进行时空位置绘制。为各位旅游提供完整的旅游路线预览。行文仓促，难免有不足之处，如有不足，还恳请各位专家博主在评论区留下真知灼见，不甚感激。
        文章部门图源和旅游路线推荐来源于长沙本地宝制作的2024年国庆长沙旅游路线，原文：
国庆来长沙，5条游玩路线推荐！差别范例，值得一逛，祝大家接入愉快。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。