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()
})

 

---

 

这样就实现了我们一开始图片中的那样，如果有更好的方法希望大家留言私信告诉我互相学习，希望这个教学对大家有帮助