欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Leaflet 学习心路历程之 —— 使用插件完成Marker点位历史轨迹回放(Marker点位轨迹)

程序员文章站 2022-07-13 15:36:42
...

Leaflet之历史轨迹回放

话不多说直接放图

Leaflet 学习心路历程之 —— 使用插件完成Marker点位历史轨迹回放(Marker点位轨迹)
点位历史轨迹回放

近期在接触到这个功能的时候一直使用的是Leaflet 的一个插件 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()
})

 


 

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