實戰(zhàn)：基于 Leaflet 的旅游地圖相冊實現(xiàn)

本章節(jié)繼續(xù)通過 Leaflet 實現(xiàn)一個旅游地圖相冊demo，目的是為了更加熟悉一下地圖JS API和實戰(zhàn)練手，本Demo有點小意義，可以用來作為個人的旅游足跡地圖，記錄自己的旅游經(jīng)歷日后回憶。

提前看demo效果：

縮略圖點擊大圖預覽實現(xiàn)相冊效果

下邊一步步來實現(xiàn)：

旅游地圖相冊功能點介紹

不管做系統(tǒng)開發(fā)還是Demo開發(fā)，熟悉需求和功能點是首要前提，然后再考慮使用什么技術去實現(xiàn)該功能，同樣一個功能，可以有很多技術去實現(xiàn)，不同的編程語言或者是同樣編程語言的不同庫等。

功能點如圖：

旅游地圖相冊

本Demo使用的技術點：

·地圖相關功能使用 Leaflet.js

·地圖相冊大圖預覽使用 viewerjs

·數(shù)據(jù)結(jié)構(gòu)，為了快速模擬相果將使用本地靜態(tài)資源的方式，json文件模擬數(shù)據(jù)

地圖展示

這里不介紹如何實現(xiàn)多圖層切換展示了，圖層切換展示實現(xiàn)見上一篇《實戰(zhàn)：基于Leftlet 臺風實時路徑實現(xiàn)》介紹。

本Demo采用圖層來自geoq發(fā)布的 ChinaOnlineStreetPurplishBlue Esri ArcGIS圖層，可以訪問鏈接詳細了解。

地圖圖層加載實現(xiàn)代碼：

圖層展示截圖

如果覺得地圖樣式不好看，自己隨意改一下地圖服務就好了。這里介紹一個可用的在線ArcGIS地圖服務 ArcGIS Online ArcGIS REST Services

旅游足跡點實現(xiàn)

足跡就是個點要素，使用 Marker 來實現(xiàn)，并自定義icon圖標樣式。

（1）定義足跡點數(shù)據(jù)

Marker 定位是需要坐標點數(shù)據(jù)的，這里的坐標點就是旅游城市或者景點的坐標點。如果真要找到準確的坐標點數(shù)據(jù)，可以通過地圖搜索對應城市或者景區(qū)，拾取坐標信息，百度和高德地圖都有提供這類工具，比如百度的 拾取坐標系統(tǒng)。

在項目下新建文件夾和文件./data/data.json，下邊是Demo開發(fā)演示數(shù)據(jù)：

數(shù)據(jù)是個json格式，rows 屬性是個數(shù)組，存放的是所有旅游足跡點對象信息，每個旅游足跡點數(shù)據(jù)是個對象，對象屬性含義介紹：

·country：旅游國家

·city：城市名稱

·date：旅游時間

·imgs：旅游照片名稱（含格式后綴）

·remark：旅游經(jīng)歷介紹描述

·longitude：城市或者景區(qū)的坐標經(jīng)度

·latitude：城市或者景區(qū)的坐標緯度

下邊我們就通過編碼實現(xiàn)來根據(jù)數(shù)據(jù)實現(xiàn)足跡點展示

（2）足跡點展示

上一篇我們介紹過本地文件引入數(shù)據(jù)的方式，本Demo就改用ajax請求獲取數(shù)據(jù)的方式吧。

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

通過 $.get 請求獲取 data.json 文件數(shù)據(jù)

代碼有詳細注釋介紹，最終效果如下圖所示：

足跡點展示效果

注意的是，如果你使用ajax請求獲取數(shù)據(jù)，demo需要部署，直接雙擊打開index.html是不行的，使用 《了解前端工程化和利用node.js作為工具使得開發(fā)變得高效》章節(jié)介紹的 http-server工具快速部署預覽即可。

Marker足跡樣子圖標 是在阿里的圖標庫下載的，類似的圖標下載網(wǎng)站還有 easyicon.net

（3）在Marker點擊彈窗中展示旅游照片縮略圖，并支持預覽大圖

Leaflet的Popup 函數(shù)是支持 html字符串參數(shù)的，會自動解析，所以照片可以通過html的img元素去實現(xiàn)。

在工程目錄下新建./style.css文件，內(nèi)容如下：

樣式是根據(jù)html布局自己寫的，這里demo實現(xiàn)，不再介紹，直接給出本demo的樣式。

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

接著，我們先簡單的實現(xiàn)img縮略圖效果，獨立寫一個方法generatePicHtml，專門用來處理圖片html字符串。

實際渲染的html結(jié)構(gòu)可以通過chrome開發(fā)工具調(diào)試看圖片html字符串渲染DOM結(jié)構(gòu)：

圖片html字符串渲染DOM結(jié)構(gòu)

這只是縮略圖，接下來實現(xiàn)點擊縮略圖可以查看預覽大圖。前面介紹了，預覽大圖我們使用viewerjs，類似的大圖預覽JS庫很多，比如fancybox等。

同樣，引入viewerjs文件和對應樣式文件，還是使用 BootCDN 提供的cdn地址

根據(jù)viewerjs的api使用特點，我們在原來圖片縮略圖的html的ul元素綁定點擊事件，利用事件委托（給小白參考的文章）的方式處理每個縮略圖的點擊事件，點擊事件調(diào)用 viewPic() 方法來處理預覽大圖。

最后看效果：

縮略圖點擊大圖預覽實現(xiàn)相冊效果

到這里，就完成了地圖旅游相冊Demo的全部功能了。是不是簡單的API實現(xiàn)了酷炫的Demo效果？

漸進增強的完善Demo

不管學習什么知識，舉一反三的原則都是對學習有很大的幫助，多思考，多動手。這里漸進增強 的意思就是，Demo逐漸去增加功能，逐漸完善效果等。

下邊列舉本Demo可以增強的功能點，感興趣的同學自己去實現(xiàn)，練手：

·多種效果地圖圖層切換，如影像、街道、山地圖等

·增強足跡點效果，動畫酷炫效果

·添加查詢功能，可以不需要后端，前端模擬查詢，動態(tài)過濾靜態(tài)數(shù)據(jù)就可以了。查詢到的足跡直接地圖居中定位，并自動彈窗。

·部署demo到網(wǎng)上，域名綁定，分享朋友圈別人可以預覽你的成果（往后章節(jié)有介紹如何托管靜態(tài)文件到Github并綁定自定義域名）。

·支持視頻，實現(xiàn)思路和圖片相冊類似

如果你還會寫后端，你可以開發(fā)后端，擴展以下功能：

·實現(xiàn)登錄和注冊

·登錄用戶可以自己創(chuàng)建足跡點，新增描述信息，上傳圖片（這些數(shù)據(jù)都走數(shù)據(jù)庫了）

·可以自定義地圖底圖

·支持生成分享鏈接，可以分享到社交網(wǎng)站或者朋友圈。

……

等等，漸進增強后，就是一個旅游足跡網(wǎng)站了，慢慢的變?yōu)橐粋€前后端完整的 WebGIS 系統(tǒng)。

本章小結(jié)

本章主要一步一步講解如何實現(xiàn)地圖旅游相冊Demo，并介紹一些資源和實現(xiàn)思路，為了讓讀者可以學習如何自己開發(fā)Demo，和通過開發(fā)Demo學到什么。如果你JavaScript和HTML/CSS不熟悉，看不懂，建議先去學習掌握之后，再回來動手實現(xiàn)Demo，這樣才有收獲。如果文章中有錯誤的地方歡迎指出，也歡迎留言討論。

demo源碼：gis616（備注源碼）

（持續(xù)更新中....）