在vue2中使用leaflet.AnimatedMarker来移动某个目标

需求是: 点击某个按钮后 让扫描仪沿着某条线移动进行扫描

效果: 

 

扫描仪是沿着河流移动的，河流的生成方式通过geojson数据生成，geojson里包含了河流的一些点位的经纬度，扫描仪根据经纬度来移动

leaflet: 1.9.4  leaflet.AnimatedMarker: 1.0.0

 

1.引入

  import L from 'leaflet'  

  import 'leaflet.AnimatedMarker/src/AnimatedMarker'

2.拿到河流的geojson里的经纬度，这里返回的经纬度数据格式可能并不是animatedmarker所需的数据格式，需进行转换

animatedmarker所需的数据格式
let arr = [
  [120.3423, 30.2345],
  [120.4567, 30.4567],
  [120.6789. 30.8654]
]

this.moveMarker = L.animatedMarker(arr, {
        icon: this.areaIcon(),
        interval: 50,   //间隔 控制点移动速度 值越小移动越快
        autoStart: false,  //是否自动移动
        onEnd: () => {
           console.log('移动结束')  
        }
}).addTo(this.map)

this.moveMarker.on('move', e => {
  //可以监听当前移动的经纬度 //可以通过监听点移动的位置来判断跟另一个点位之间的距离
})

setTimeout(() => {
  this.moveMarker.start()  //如果上面设置了autoStart为true 就不需要这样启动点
}, 100)

 

areaIcon() {   //自定义点的样式

  return L.divIcon({
    html: `<div class="sy-marker-problem">
             <div class="sy-marker-problem-inner"></div>
             <div class="__wave"></div>
             <div class="__wave2"></div>
             <div class="__wave3"></div>
           </div>`,
    iconSize: [30, 30]
  })

}

 

//扫描仪的样式

.sy-marker-problem{
  width: 30px;
  height: 30px;
  border: 2px solid #00EEFF;
  border-radius: 50%;
  box-shadow: 0px 0px 6px #00EEFF;
}
.sy-marker-problem-inner{
  width: 16px;
  height: 16px;
  position: relative;
  left: 5px;
  top: 5px;
  border: 2px solid #00EEFF;
  border-radius: 50%;
  box-shadow: 0px 0px 6px #00EEFF;
}
.sy-marker-problem  .__wave,
.sy-marker-problem  .__wave2,
.sy-marker-problem  .__wave3{
  position: absolute;
  top: 0px;
  right: 0;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}
.sy-marker-problem  .__wave {
  display: block;
  background: #88d3d8;
  animation: animateWave 1s linear infinite;
}
.sy-marker-problem  .__wave2 {
  display: block;
  background: #88d3d8;
  animation: animateWave2 1s linear infinite;
}
.sy-marker-problem  .__wave3 {
  display: block;
  background: #88d3d8;
  animation: animateWave3 1s linear infinite;
}
@keyframes animateWave {
  0% {
    opacity: .5;
    transform: scale(1.5);
  }
  50% {
    opacity: .2;
    transform: scale(2.5);
  }
  100% {
    opacity: 0.2;
    transform: scale(3);
  }
}
@keyframes animateWave2 {
  0% {
    opacity: .5;
    transform: scale(3);
  }
  50% {
    opacity: .2;
    transform: scale(4);
  }
  100% {
    opacity: 0.2;
    transform: scale(4.5);
  }
}
@keyframes animateWave3 {
  0% {
    opacity: .5;
    transform: scale(4.5);
  }
  50% {
    opacity: .5;
    transform: scale(5.5);
  }
  100% {
    opacity: 0.3;
    transform: scale(6);
  }
}