Yêu cầu: Khi nhấn vào một nút, cho phép quét viên di chuyển dọc theo một tuyến đường.

Hiệu ứng:

Quét viên sẽ di chuyển dọc theo dòng sông được tạo ra từ dữ liệu geojson. Geojson chứa các điểm với tọa độ kinh độ vĩ độ của dòng sông, và quét viên sẽ di chuyển dựa trên các tọa độ này.

Phiên bản sử dụng:

leaflet: 1.9.4
leaflet.AnimatedMarker: 1.0.0

1. Nhập thư viện:

import L from 'leaflet';
import 'leaflet.AnimatedMarker/src/AnimatedMarker';

2. Lấy tọa độ kinh độ vĩ độ từ dữ liệu geojson của dòng sông. Định dạng dữ liệu nhận được có thể không phù hợp với định dạng yêu cầu của animatedmarker, cần phải chuyển đổi.

Định dạng dữ liệu cần thiết cho animatedmarker:

let danhSachDiem = [
  [120.3423, 30.2345],
  [120.4567, 30.4567],
  [120.6789, 30.8654]
]

Tạo đối tượng animatedmarker:

this.diChuyenDiem = L.animatedMarker(danhSachDiem, {
  icon: this.hinhIcon(),
  interval: 50, // khoảng cách giữa mỗi điểm, điều chỉnh tốc độ di chuyển (giá trị nhỏ hơn làm tăng tốc độ)
  autoStart: false, // không tự động bắt đầu di chuyển
  onEnd: () => {
    console.log('Di chuyển kết thúc');
  }
}).addTo(this.banDo);

this.diChuyenDiem.on('move', e => {
  // có thể lắng nghe vị trí hiện tại của điểm di chuyển
});

setTimeout(() => {
  this.diChuyenDiem.start(); // nếu đã đặt autoStart là true thì không cần gọi start()
}, 100);

Hàm tùy chỉnh hình icon:

hinhIcon() {
  return L.divIcon({
    html: `<div class="vi-tri-quet">
             <div class="vi-tri-quet-trong"></div>
             <div class="dong-van"></div>
             <div class="dong-van2"></div>
             <div class="dong-van3"></div>
           </div>`,
    iconSize: [30, 30]
  });
}

CSS cho quét viên:

.vi-tri-quet {
  width: 30px;
  height: 30px;
  border: 2px solid #00EEFF;
  border-radius: 50%;
  box-shadow: 0px 0px 6px #00EEFF;
}
.vi-tri-quet-trong {
  width: 16px;
  height: 16px;
  position: relative;
  left: 5px;
  top: 5px;
  border: 2px solid #00EEFF;
  border-radius: 50%;
  box-shadow: 0px 0px 6px #00EEFF;
}
.vi-tri-quet .dong-van,
.vi-tri-quet .dong-van2,
.vi-tri-quet .dong-van3 {
  position: absolute;
  top: 0px;
  right: 0;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
}
.vi-tri-quet .dong-van {
  display: block;
  background: #88d3d8;
  animation: diChuyenDongVan 1s linear infinite;
}
.vi-tri-quet .dong-van2 {
  display: block;
  background: #88d3d8;
  animation: diChuyenDongVan2 1s linear infinite;
}
.vi-tri-quet .dong-van3 {
  display: block;
  background: #88d3d8;
  animation: diChuyenDongVan3 1s linear infinite;
}
@keyframes diChuyenDongVan {
  0% {
    opacity: .5;
    transform: scale(1.5);
  }
  50% {
    opacity: .2;
    transform: scale(2.5);
  }
  100% {
    opacity: 0.2;
    transform: scale(3);
  }
}
@keyframes diChuyenDongVan2 {
  0% {
    opacity: .5;
    transform: scale(3);
  }
  50% {
    opacity: .2;
    transform: scale(4);
  }
  100% {
    opacity: 0.2;
    transform: scale(4.5);
  }
}
@keyframes diChuyenDongVan3 {
  0% {
    opacity: .5;
    transform: scale(4.5);
  }
  50% {
    opacity: .5;
    transform: scale(5.5);
  }
  100% {
    opacity: 0.3;
    transform: scale(6);
  }
}