实战：基于 Leaflet 的旅游地图相册实现

本章节继续通过 Leaflet 实现一个旅游地图相册demo，目的是为了更加熟悉一下地图JS API和实战练手，本Demo有点小意义，可以用来作为个人的旅游足迹地图，记录自己的旅游经历日后回忆。

提前看demo效果：

缩略图点击大图预览实现相册效果

下边一步步来实现：

旅游地图相册功能点介绍

不管做系统开发还是Demo开发，熟悉需求和功能点是首要前提，然后再考虑使用什么技术去实现该功能，同样一个功能，可以有很多技术去实现，不同的编程语言或者是同样编程语言的不同库等。

功能点如图：

旅游地图相册

本Demo使用的技术点：

·地图相关功能使用 Leaflet.js

·地图相册大图预览使用 viewerjs

·数据结构，为了快速模拟相果将使用本地静态资源的方式，json文件模拟数据

地图展示

这里不介绍如何实现多图层切换展示了，图层切换展示实现见上一篇《实战：基于Leftlet 台风实时路径实现》介绍。

本Demo采用图层来自geoq发布的 ChinaOnlineStreetPurplishBlue Esri ArcGIS图层，可以访问链接详细了解。

地图图层加载实现代码：

图层展示截图

如果觉得地图样式不好看，自己随意改一下地图服务就好了。这里介绍一个可用的在线ArcGIS地图服务 ArcGIS Online ArcGIS REST Services

旅游足迹点实现

足迹就是个点要素，使用 Marker 来实现，并自定义icon图标样式。

（1）定义足迹点数据

Marker 定位是需要坐标点数据的，这里的坐标点就是旅游城市或者景点的坐标点。如果真要找到准确的坐标点数据，可以通过地图搜索对应城市或者景区，拾取坐标信息，百度和高德地图都有提供这类工具，比如百度的 拾取坐标系统。

在项目下新建文件夹和文件./data/data.json，下边是Demo开发演示数据：

数据是个json格式，rows 属性是个数组，存放的是所有旅游足迹点对象信息，每个旅游足迹点数据是个对象，对象属性含义介绍：

·country：旅游国家

·city：城市名称

·date：旅游时间

·imgs：旅游照片名称（含格式后缀）

·remark：旅游经历介绍描述

·longitude：城市或者景区的坐标经度

·latitude：城市或者景区的坐标纬度

下边我们就通过编码实现来根据数据实现足迹点展示

（2）足迹点展示

上一篇我们介绍过本地文件引入数据的方式，本Demo就改用ajax请求获取数据的方式吧。

index.html引入jquery文件（可以使用cdn在线引入方式，也可以下载jquery文件，本地文件引入方式，看个人喜好）

通过 $.get 请求获取 data.json 文件数据

代码有详细注释介绍，最终效果如下图所示：

足迹点展示效果

注意的是，如果你使用ajax请求获取数据，demo需要部署，直接双击打开index.html是不行的，使用 《了解前端工程化和利用node.js作为工具使得开发变得高效》章节介绍的 http-server工具快速部署预览即可。

Marker足迹样子图标 是在阿里的图标库下载的，类似的图标下载网站还有 easyicon.net

（3）在Marker点击弹窗中展示旅游照片缩略图，并支持预览大图

Leaflet的Popup 函数是支持 html字符串参数的，会自动解析，所以照片可以通过html的img元素去实现。

在工程目录下新建./style.css文件，内容如下：

样式是根据html布局自己写的，这里demo实现，不再介绍，直接给出本demo的样式。

然后在 index.html 下引入样式文件

接着，我们先简单的实现img缩略图效果，独立写一个方法generatePicHtml，专门用来处理图片html字符串。

实际渲染的html结构可以通过chrome开发工具调试看图片html字符串渲染DOM结构：

图片html字符串渲染DOM结构

这只是缩略图，接下来实现点击缩略图可以查看预览大图。前面介绍了，预览大图我们使用viewerjs，类似的大图预览JS库很多，比如fancybox等。

同样，引入viewerjs文件和对应样式文件，还是使用 BootCDN 提供的cdn地址

根据viewerjs的api使用特点，我们在原来图片缩略图的html的ul元素绑定点击事件，利用事件委托（给小白参考的文章）的方式处理每个缩略图的点击事件，点击事件调用 viewPic() 方法来处理预览大图。

最后看效果：

缩略图点击大图预览实现相册效果

到这里，就完成了地图旅游相册Demo的全部功能了。是不是简单的API实现了酷炫的Demo效果？

渐进增强的完善Demo

不管学习什么知识，举一反三的原则都是对学习有很大的帮助，多思考，多动手。这里渐进增强 的意思就是，Demo逐渐去增加功能，逐渐完善效果等。

下边列举本Demo可以增强的功能点，感兴趣的同学自己去实现，练手：

·多种效果地图图层切换，如影像、街道、山地图等

·增强足迹点效果，动画酷炫效果

·添加查询功能，可以不需要后端，前端模拟查询，动态过滤静态数据就可以了。查询到的足迹直接地图居中定位，并自动弹窗。

·部署demo到网上，域名绑定，分享朋友圈别人可以预览你的成果（往后章节有介绍如何托管静态文件到Github并绑定自定义域名）。

·支持视频，实现思路和图片相册类似

如果你还会写后端，你可以开发后端，扩展以下功能：

·实现登录和注册

·登录用户可以自己创建足迹点，新增描述信息，上传图片（这些数据都走数据库了）

·可以自定义地图底图

·支持生成分享链接，可以分享到社交网站或者朋友圈。

……

等等，渐进增强后，就是一个旅游足迹网站了，慢慢的变为一个前后端完整的 WebGIS 系统。

本章小结

本章主要一步一步讲解如何实现地图旅游相册Demo，并介绍一些资源和实现思路，为了让读者可以学习如何自己开发Demo，和通过开发Demo学到什么。如果你JavaScript和HTML/CSS不熟悉，看不懂，建议先去学习掌握之后，再回来动手实现Demo，这样才有收获。如果文章中有错误的地方欢迎指出，也欢迎留言讨论。

demo源码：gis616（备注源码）

（持续更新中....）