需求是: 点击某个按钮后 让扫描仪沿着某条线移动进行扫描
效果:
扫描仪是沿着河流移动的，河流的生成方式通过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: `
}
//扫描仪的样式
.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); }}