實戰(zhàn)：基于Leaflet 臺風(fēng)實時路徑實現(xiàn)

上一篇簡單介紹了幾個地圖JS庫實現(xiàn)簡單的DEMO后，本章內(nèi)容將漸進實現(xiàn)一個模擬臺風(fēng)實時路徑效果的Demo。這個demo使用什么JS庫都可以實現(xiàn)，以下我將使用 leaflet.js 去實現(xiàn)，感興趣的同學(xué)可以使用其他JS庫模仿實現(xiàn)一樣的功能效果。

Demo功能介紹：

·地圖圖層切換（基礎(chǔ)底圖&影像圖）

·臺風(fēng)路徑繪制及動態(tài)繪制路徑效果。

·臺風(fēng)圖標Marker及氣泡信息彈窗

先看最終效果：

下邊來一步步實現(xiàn)如圖效果的代碼過程。

地圖圖層切換實現(xiàn)

上一篇文章的介紹的 leaflet demo 加載了一個地圖地圖和實現(xiàn)了折線圖的繪制，我們來增強一下效果。

L.Map 接口參數(shù)可以接收個 layers 屬性，用來在地圖初始化時加載多個圖層。我們先定義好兩個圖層：影像圖 和 街道圖 圖層：

以上id屬性mapbox.satellite意思是加載衛(wèi)星影像的切片圖層的意思，你可以更換為 mapbox.grayscale 看效果，就是加載grayscale圖層了。

然后將圖層加載到地圖實例上：

這樣還不行，地圖初始化已經(jīng)加載了兩個圖層，我們還需要加一個圖層切換按鈕來控制切換不同圖層。這里可以自定義圖層按鈕效果，為了演示方便，使用官方的 layers-control 來實現(xiàn)即可。比較簡單，見下面代碼：

我們來看截圖效果：

地圖右下角版權(quán)信息自定義

我們平時瀏覽地圖時，細心的你會發(fā)現(xiàn)，右下角一般都有版權(quán)信息，這個信息也是可以自定義的（不過商業(yè)使用要注釋版權(quán)問題，這里只是學(xué)習(xí)演示）。

版權(quán)信息是加載再圖層上的，每個圖層都可以自定義不同的版權(quán)信息。Leaflet中，通L.tileLayer的第三個屬性就是版權(quán)信息參數(shù)，接收的是html字符串或者文本。

然后定義圖層的時候把版權(quán)信息傳入即可：

最終效果：

臺風(fēng)路徑繪制及動態(tài)繪制路徑效果

(一)、獲取臺風(fēng)路徑點數(shù)據(jù)

說明：本文章是為了實現(xiàn)demo效果，數(shù)據(jù)獲取方面，正式的開發(fā)中，是通過接口調(diào)用后端訪問數(shù)據(jù)的。demo演示時，將會寫死點數(shù)據(jù)。

文章demo數(shù)據(jù)在源碼目錄下的./data.js文件中，數(shù)據(jù)量有點大，直接引入到demo頁面加載，這里就不粘貼出來了。數(shù)據(jù)獲取是從浙江水利廳臺風(fēng)實時系統(tǒng)獲取的，有想自己獲取數(shù)據(jù)的同學(xué)，可以打開網(wǎng)站，打開調(diào)試工具后，network tab下看對應(yīng)接口的請求日記返回值即可找到臺風(fēng)信息的坐標點數(shù)據(jù)。

從網(wǎng)站上獲取臺風(fēng)路徑數(shù)據(jù)格式如圖：

臺風(fēng)數(shù)據(jù)格式

（二）、根據(jù)點數(shù)據(jù)繪制折線

之前的簡單demo我們也演示過簡單折線的繪制，和臺風(fēng)數(shù)據(jù)折線實際沒多大區(qū)別，可以簡單的認為就是坐標點多了一些而已。

我們在編碼之前要多思考，比如實現(xiàn)臺風(fēng)路徑繪制，調(diào)用接口繪制路線，先分析臺風(fēng)數(shù)據(jù)格式的特點，再了解Leaflet polyline 方法的參數(shù)特點，如果不一致，必然是需要程序去轉(zhuǎn)換一下。

L.polyline 的參數(shù)為一個二維數(shù)據(jù)，也就是 [[經(jīng)度，緯度],[經(jīng)度,緯度]] 的格式。和獲取到的臺風(fēng)路徑j(luò)son格式有出入，所以我們需要進行一次數(shù)據(jù)轉(zhuǎn)換。

數(shù)據(jù)轉(zhuǎn)換代碼：

效果截圖：

臺風(fēng)折線圖

（三）、讓折線“動”起來，實現(xiàn)動態(tài)繪制路線

我們已經(jīng)實現(xiàn)了靜態(tài)折線的繪制，為了模擬臺風(fēng)路徑行走的效果，需要動態(tài)的繪制出折線，實現(xiàn)模擬臺風(fēng)“行走”。最簡單的思路就是，通過一組一組遞增的折線點，繪制折線，最新的折線繪制之前，清楚之前的折線圖層，時間間隔控制在1s左右，這樣就相當于折線動起來了。

代碼里邊一般都很詳細的說明了每個步驟的意思（照顧新人）

最后的效果：

會動的折線哦

臺風(fēng)眼圖標&氣泡信息彈窗

動態(tài)的臺風(fēng)路線以及實現(xiàn)了，然后還差一個臺風(fēng)眼marker效果，并且支持popup彈窗信息展示，展示臺風(fēng)的風(fēng)速，位置具體信息。

（一）、Marker效果實現(xiàn)

我們先一步步來，介紹靜態(tài)的 Marker圖標 定位如何實現(xiàn)。Leaflet 提供了一個 L.Marker 圖層，它繼承于Layer，支持點擊和拖拽以及自定義圖標。

簡單使用：

自定義圖標可以通過 L.Icon 來實現(xiàn)，我們找到一個類似臺風(fēng)眼的圖標，然后使用marker定位到臺風(fēng)路線上：

marker自定義圖標

（二）氣泡信息彈窗

通過 L.Popup 來實現(xiàn)點擊marker后彈窗信息，我們來實現(xiàn)點擊氣泡來展示臺風(fēng)信息彈窗信息實現(xiàn)有兩種方式，一種是使用Map對象提供的bindPopup方法，一種是L.popup()。下邊演示使用bingPopup方式，在創(chuàng)建完marker后，鏈式創(chuàng)建popup氣泡彈窗信息窗口。

我們動態(tài)的獲取臺風(fēng)信息，創(chuàng)建popup彈窗，如圖：

信息彈窗

到現(xiàn)在，就實現(xiàn)了想要的效果了。但是為了更逼真，或者說和臺風(fēng)實時系統(tǒng)一致的效果，可以把marker動態(tài)繪制，和折線點一樣的原理。

我們修改之前的animateDrawLine()方法，使得在動態(tài)繪制折線的時候，也動態(tài)繪制marker，最后一個折線點繪制marker后，并展示Popup彈窗信息。

最終效果：

本章小結(jié)

本章實現(xiàn)臺風(fēng)路徑Demo，分解功能點：地圖圖層，折線、動態(tài)折線繪制、Marker，動態(tài)Marker、Popup彈窗信息，并逐個實現(xiàn)出來，為了讓讀者可以熟悉API功能，以及用這些簡單的API能做出各種自己想要的效果，建議初學(xué)者自己舉一反三，實現(xiàn)其他應(yīng)用效果，以便熟悉了解API，并認識到如何去開發(fā)一個功能全面一些的Demo?；蛘呤褂梅荓eaflet的地圖JS庫去實現(xiàn)本Demo效果。不要覺得看懂了而不動手，也不要看不懂而不動手，這樣就學(xué)不好編程開發(fā)。

源碼地址：gis616（備注源碼）

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