vue基于Leaflet地图实现行走轨迹动态预览详细过程

1.安装

npm install -S leaflet.animatedmarker

2.页面引用

import 'leaflet.animatedmarker/src/AnimatedMarker'

3.使用步骤

在名为 map 的 Leaflet.Map 上创建一个沿 line 移动的 AnimatedMarker

var line = L.polyline([[40.68510, -73.94136],[40.68576, -73.94149],[40.68649, -73.94165]]);//轨迹路线
var animatedMarker = L.animatedMarker(line.getLatLngs());
    
map.addLayer(animatedMarker);

改变移动速度

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  distance: 300,   // 米
  interval: 2000,  // 毫秒
});

延迟启动和中途停止

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  autoStart: false
});

// 当准备就绪时开始
animatedMarker.start();

setTimeout(function() {
  // 停止动画
  animatedMarker.stop();
}, 2000);

自定义图标

var myIcon = L.icon({
  iconUrl: 'myicon.png'
});

var animatedMarker = L.animatedMarker(line.getLatLngs(), {
  icon: myIcon
});

4.实现效果