需求：
实现前提:
1、老规矩 github看作者文档, 尝试读一读源码 上链接：
https://github.com/ewoken/Leaflet.MovingMarker
2、引入 import "./untils/moveMarker.js";
实现步骤
let config = {
id: 'id', // 唯一标识, 后期删除轨迹要用
iconUrl: 'https:******.png', // iconUrl
speed: 10000, // 速度
latlngs: [[lat1，lng2], [lat2，lng2], …],
html: `
}
this.handleCreateTrack(config);
handleCreateTrack(config) {
let featureGroup = [];
// 轨迹线
let routeLine = L.polyline(config.latlngs, {
weight: 4,
opacity: 0.7, // 定义线的透明度
});
// 定位该线至可视窗口
this.map.fitBounds(routeLine.getBounds());
// 创建icon
let carIcon = L.icon({
iconSize: [30, 30],
iconUrl: config.iconUrl,
});
// 动态marker
let animatedMarker = L.Marker.movingMarker(
routeLine.getLatLngs(),
config.speed,
// 以下配置项在github上有详细注解-----
{
autostart: true,
loop: false,
icon: carIcon,
rotate: false,
}
).bindPopup(config.html);
// 移动结束时弹出标牌
animatedMarker.on("end", function () {
animatedMarker.openPopup();
});
// 记录划线过程
let path = [];
animatedMarker.on("move", (res) => {
// 回调中会返回经纬度信息，点移动改变地图中心点
this.map.panTo([res.latlng.lat, res.latlng.lng])
// 动态画已走路线
let polyline = ...
});
featureGroup.push(animatedMarker);
featureGroup.push(routeLine);
let featureGroup = L.featureGroup(featureGroup);
// 记录地图上的点、线、面 ... 根据id 可动态删除
this.clusterLayer.push({
type: config.id,
value: featureGroup,
});
this.map.addLayer(featureGroup);
},
结果