Leaflet之历史轨迹回放
话不多说直接放图
![](https://i-blog.csdnimg.cn/blog_migrate/7c8570ea1b398e86025b1a775201ec8e.gif)
近期在接触到这个功能的时候一直使用的是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()
})