地图带你看三山五岳-基于Leaflet的重点旅游专题实现

前言

一、关于三山五岳

1、三山五岳简介

2、位置信息检索

二、使用Leaflet进行WebGIS标注

1、基础数据准备

2、点位标绘

三、实际效果

1、整体效果

2、东岳泰山

3、西岳华山

4、南岳衡山

5、北岳恒山

6、中岳嵩山

四、总结

前言

在信息技术飞速发展的今天，地理信息系统（GIS）已经广泛应用于各个领域，从城市规划到环境保护，从灾害预警到旅游开发，GIS都发挥着不可替代的作用。WebGIS，作为GIS的一个重要分支，更是凭借其基于Web技术的优势，将地理信息以更加直观、便捷的方式呈现给广大用户。使用WebGIS技术展示三山五岳，首先需要对这些名山进行详细的地理信息采集和整理。这包括山川的经纬度坐标、海拔高度、地形地貌、植被分布等基本信息，以及各名山的历史背景、文化传说、旅游景点等人文信息。这些信息将作为WebGIS展示的基础数据，为用户提供全面、准确的地理信息。

在WebGIS平台上，我们可以利用地图缩放和漫游功能，让用户能够自由浏览三山五岳的地理位置和周边环境。通过缩放地图，用户可以查看不同比例尺下的山川地貌，从全局视角到局部细节，都能尽收眼底。同时，漫游功能则允许用户沿着山川的走向或旅游线路进行虚拟游览，仿佛身临其境般感受大自然的鬼斧神工。除了基本的地图浏览功能外，WebGIS还可以结合多媒体信息，如图片、视频、音频等，为用户提供更加丰富的感官体验。例如，我们可以在地图上标注各名山的著名景点，并链接到相关的图片或视频介绍，让用户能够直观地了解这些景点的特色和魅力。此外，通过音频解说或虚拟导游的方式，还可以为用户提供更加生动的旅游体验。

在WebGIS平台上展示三山五岳，还可以进行地理空间分析。例如，我们可以利用缓冲区分析功能，研究各名山周边地区的生态环境和旅游资源分布；通过网络分析功能，优化旅游线路和交通规划；通过地理编码功能，实现旅游信息的快速检索和定位。这些分析功能不仅有助于提升旅游服务质量，还能为旅游开发和保护提供科学依据。此外，WebGIS技术还可以支持实时数据的接入和展示。例如，我们可以将实时天气、交通状况等信息整合到WebGIS平台上，为用户提供更加便捷的旅游出行服务。同时，通过用户反馈和互动功能，我们还可以收集用户对旅游服务的意见和建议，为持续改进和提升服务质量提供参考。

综上所述，使用WebGIS技术展示三山五岳，不仅能够为用户提供全面、准确的地理信息，还能通过多媒体信息和地理空间分析功能，提升用户的旅游体验和服务质量。这一技术的应用，不仅有助于推动旅游业的数字化转型和智能化发展，还能让更多的人了解和欣赏到中国的自然美景和文化遗产。未来，随着WebGIS技术的不断发展和完善，我们有理由相信，这一技术将在旅游领域发挥更加重要的作用。

本文将探讨如何使用WebGIS技术来展示中国的三山五岳，这一兼具自然美景与文化底蕴的地理奇观。首先我们从高德平台获取三山五岳的AOI面积数据以及图片信息，然后基于Leaflet在地图上进行标注，从而从空间上位大家展示如何展示这些数据。如果您对这方面感兴趣，不妨来这里看看。

一、关于三山五岳

在进行WebGIS系统的开发介绍之前，首先我们来对三山五岳的相关知识进行简单的介绍。让大家对其有个简单的认识。

1、三山五岳简介

三山五岳，作为中国传统文化中的重要符号，不仅承载着丰富的历史传说和人文情怀，更以其独特的自然风光吸引着无数游客的目光。三山，指的是安徽黄山、江西庐山、浙江雁荡山；五岳，则是东岳泰山、西岳华山、中岳嵩山、南岳衡山、北岳恒山。这些名山各具特色，有的以奇松怪石著称，有的以雄奇险峻闻名，有的则以其深厚的文化底蕴吸引着四方来客。

通过检索相关网站，可以搜索到三山五岳的所属省份和海拔信息，我们根据检索的信息整理成以下表格信息。

序号	名称	所在省份	海拔
1	黄山	安徽省	1864米
2	庐山	江西省	1474米
3	雁荡山	浙江省	1108米

三山基本信息表

序号	名称	所在省份	海拔
1	东岳.泰山	山东省	1545米
2	西岳.华山	陕西省	2155米
3	南岳.衡山	湖南省	1300米
4	北岳.恒山	山西省	2017米
5	中岳.嵩山	河南省	1512米

五岳基本信息表

有了三山五岳的基本信息之后，我们就有了数据基础，可以在地图上进行相应的标注。

2、位置信息检索

关于如何在高德地图中获取目标兴趣点的位置信息，我们可以直接在高德地图中进行检索。打开其地图界面后就可以进行信息的查询。这里以北岳恒山为例，如下图所示：

然后在网络请求界面中复制具体的面信息，不熟悉的可以查阅之前的相关博客。同时还有目标景点的坐标信息和图片信息。

这里需要将图片的地址复制下来，在后面的标注中会使用的到。这将是我们的数据基础。

二、使用Leaflet进行WebGIS标注

有了上述的数据基础后，我们来看一下如何在Leaflet当中进行相关的标注和展示。

1、基础数据准备

为了方便在Leaflet中进行数据的准备，这里我们直接将三山五岳的基本信息整理成以下的标注信息。这里将整理好的JSON数组分享给大家,如下所示,AOI的数据请大家自己补全，全部贴上来数据有点多，如果想直接要数据，也可以在博客下方留下邮箱留言:

var fjqData = [{"name":"黄山","p_name":"安徽省","h":"1864","img":"https://store.is.autonavi.com/showpic/e82f9f2c5995f5e08d6c5b29943b68ac?operate=merge&w=160&h=150&position=5",color:"#4b29b5","center":{"lat":30.139322,"lon":118.160164},"aoi_data":""},{"name":"庐山","p_name":"江西省","h":"1474","img":"https://store.is.autonavi.com/showpic/8b0a2ea7508699ea63d68ad7b495f171?operate=merge&w=160&h=150&position=5",color:"#03a9f4","center":{"lat":29.52203,"lon":115.973097},"aoi_data":""},{"name":"雁荡山","p_name":"浙江省","h":"1108","img":"https://store.is.autonavi.com/showpic/9c9a55a345aae696628acf5d3abbb81b?operate=merge&w=160&h=150&position=5",color:"#13a159","center":{"lat":28.373656,"lon":121.033716},"aoi_data":""},{"name":"东岳.泰山","p_name":"山东省","h":"1545","img":"https://store.is.autonavi.com/showpic/b75c648954f3465f79f76d6dd3f1fb25?operate=merge&w=160&h=150&position=5",color:"#13a159","center":{"lat":36.257434,"lon":117.10884},"aoi_data":""},{"name":"南岳.衡山","p_name":"湖南省","h":"1300","img":"https://store.is.autonavi.com/showpic/1a09aee847c2b56df59739d9b883687b?operate=merge&w=160&h=150&position=5",color:getRandomColor(),"center":{"lat":27.269306,"lon":112.715522},"aoi_data":""},{"name":"北岳.恒山","p_name":"山西省","h":"2017","img":"https://store.is.autonavi.com/showpic/cabab5e510e976331f07a46f66c3fb52?operate=merge&w=160&h=150&position=5",color:getRandomColor(),"center":{"lat":39.663714,"lon":113.727001},"aoi_data":""},{"name":"中岳.嵩山","p_name":"河南省","h":"1512","img":"https://store.is.autonavi.com/showpic/e94ecc0b5a946cff6389ea9d86391086?operate=merge&w=160&h=150&position=5",color:getRandomColor(),"center":{"lat":34.634343,"lon":113.116608},"aoi_data":""}];

生成随机颜色的方法如下：

function getRandomColor() {var letters = '0123456789ABCDEF';var color = '#';for (var i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;
}

2、点位标绘

接下来我们将点位信息列表在地图上进行标绘，使用Leaflet引擎进行空间信息展示。与之前介绍得其它方法不一样，这里支持对图片进行展示。

for(var i=0;i<fjqData.length;i++){var html = "";var pointJson = gcj02towgs84(parseFloat(fjqData[i].center.lon),parseFloat(fjqData[i].center.lat));var marker = L.marker([pointJson[1], pointJson[0]], {icon: L.divIcon({iconSize: null,className: '',popupAnchor:[5,5],shadowAnchor:[5,5],html: buildHtml(fjqData[i])})}).addTo(collisionLayer);L.polygon([convertStr2DataArrayTrans(fjqData[i].aoi_data)],style).addTo(map).bindPopup(fjqData[i].name+"转换数据");
}

构建展示效果的方法：

function buildHtml(dataJson){var html = "";html += "<div class='marsBlackPanel' style='background:"+dataJson.color+";' animation-spaceInDown>";html += "<div class='' style='background-image:url("+dataJson.img+");height:150px;width:160px;' ></div>";html += "<div class='marsBlackPanel-text' style=''>" + dataJson.name  + "</div>";html += "<div class='marsBlackPanel-text' style=''>" + dataJson.p_name +",海拔:"+ dataJson.h +"米</div>";html += "</div>";return html;
}

这样，就基本完成了基于Leaflet的自助标绘和展示的代码开发。下面我们来看一下实际的效果。

三、实际效果

经过实际代码的开发，我们来看一下实际的效果。

1、整体效果

先来看一下整体的效果，从整体的空间格局上看，三山五岳的分布还是比较分散的，分散在我国的不同省份。如下图所示：

说完整体展示效果，下面来看一下五岳的AOI位置展示以及影像图信息。

2、东岳泰山

东岳泰山，又名岱山、岱宗、岱岳、东岳、泰岳，为五岳之首，有“五岳之首”“天下第一山”之称，位于山东省中部，隶属于泰安市。泰山的名字最早出现于《诗经》中，在先秦时期，“太”和“大”常常被通用。由于“太”和“泰”同音，且“泰”意味着宏大、畅通和安宁，于是原本被称为“大山”的泰山就被命名为“泰山”。

3、西岳华山

华山，古称“西岳”，雅称“太华山”，为五岳之一，位于陕西省渭南市华阴市，自古以来就有“奇险天下第一山”的说法。《水经·渭水注》载：“其高五千仞，削成四方，远而望之，又若花状。”古“花”、“华”通用，故“华山”即“花山”。中华之“华”，就源于华山，华夏民族最初形成并居住于“华山之周”，名其国土曰“华”。

4、南岳衡山

衡山，又名南岳、寿岳、南山，主体部分位于湖南省衡阳市南岳区、衡山县和衡阳县东部。据战国时期《甘石星经》记载，因其位于星座二十八宿的轸星之翼，“变应玑衡”，“铨德钧物”，犹如衡器，可称天地，故名衡山。” 轸星主管人间苍生寿命，衡山故又名“寿岳”，寿比南山“中的南山指的就是衡山。

5、北岳恒山

恒山，亦名“太恒山”，古称玄武山、崞山，高是山，玄岳等位于山西省浑源县城南。恒山之名的由来，在《风俗通》载：“恒，常也，万物伏北方，有常也。 ”也就是说，因恒山位居北方，而北方阴终阴始，其道恒久，为恒常之所，故曰“恒山”。

6、中岳嵩山

嵩山，五岳之“中岳”，秦岭山系东延的余脉，位于河南省郑州市登封市，著名的佛道圣地，闻名全国的少林寺所在地。嵩山有七十二峰，太室山和少室山各占三十六。中岳嵩山，古称“外方”、“嵩高”。古时，嵩山名为“外方”，夏商时称“崇高”《尔雅》上说“山大而高者叫嵩”，嵩山据《诗经.大雅》中“嵩高唯岳，峻极于天”的诗句而命名。

四、总结

以上就是本文的主要内容，本文将探讨如何使用WebGIS技术来展示中国的三山五岳，这一兼具自然美景与文化底蕴的地理奇观。首先我们从高德平台获取三山五岳的AOI面积数据以及图片信息，然后基于Leaflet在地图上进行标注，从而从空间上位大家展示如何展示这些数据。行文仓促，定有许多不足之处，如有不当之处，还请各位专家博主在评论区留言批评指正，不胜感激。