Leaflet 學習心路歷程之 —— 使用插件完成Marker點位歷史軌跡回放（Marker點位軌跡）

Leaflet之歷史軌跡回放

話很少說直接放圖

點位歷史軌跡回放

近期在接觸到這個功能的時候一直使用的是Leaflet 的一個插件 Leaflet.MovingMarker 

---

    演示程序 點擊這裏

• 源代碼名稱:Leaflet.MovingMarker
• 源代碼網址:http://www.github.com/ewoken/Leaflet.MovingMarker
• Leaflet.MovingMarker源代碼文檔
• Leaflet.MovingMarker源代碼下載

---

這裏呢他的效果是直接將線區域直接渲染完成，這裏我作一個小的改動

首先marker點位按照數據進行移動

this.map.fitBounds(這裏是咱們的點位數據) // 將地圖視層儘量大的設定在給定的地理邊界內
var marker2 = L.Marker.movingMarker(點位數據格式與marker內的同樣[lat,lng], 10000 '//動畫時長', { autostart: true, loop: false, icon: policeCarIcon, rotate: false }).addTo(this.map)
//後面這些能夠參考上面的插件文檔進行解讀

 

而後咱們要考慮如何將線繪製到圖層上去 ： 這裏個人思路是這樣的，經過監聽Marker點位的移動進行線繪製（暫時個人思路是這樣的，若是有更好的方法實現能夠留言私信告訴我）

// 地圖根據點位移動，一直設置點位爲中心點
let path = [] // 聲明繪製線的臨時使用變量
marker2.on('move', res => { // 監聽點位移動事件 move
    this.map.panTo([res.latlng.lat, res.latlng.lng]) //回調中會返回經緯度信息，點移動改變地圖中心點
    path.length > 1 && path.shift() // 保持數組長度，避免過分push不斷從新繪製以前的路徑
    path.push([res.latlng.lat, res.latlng.lng]) // 將數據push到數組中
    L.polyline(path, { color: '#20a080', weight: 2 }).addTo(this.map) // 繪製線到地圖圖層
})
// 這裏我作了一個軌跡回放結束事件 end
marker2.on('end', function () {
    // closeOnClick: false 點擊別處不會消失
    marker2.bindPopup('<b>軌跡結束顯示</b>', { closeOnClick: true }).openPopup()
})

 

---

 

這樣就實現了咱們一開始圖片中的那樣，若是有更好的方法但願你們留言私信告訴我互相學習，但願這個教學對你們有幫助