场景
Leaflet快速入门与加载OSM显示地图：
Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图
在上面的基础上怎样实现要素轨迹移动效果。
插件地址：
GitHub - openplans/Leaflet.AnimatedMarker: A Leaflet plugin to animated a Marker along a polyline
注：
博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、下载插件并引入依赖
<script type="text/javascript" src="./js/AnimatedMarker.js"></script>
2、添加自定义图标和轨迹数据组，这里是两条轨迹路线
//添加自定义图标var bikeIcon = L.icon({//图标地址iconUrl: './images/marker-bike-green-shadowed.png',//图标大小iconSize: [25, 39]});//轨迹线数组var routeLines = [L.polyline([[36.09, 120.35], [36.10, 120.36], [36.11, 120.37]]),L.polyline([[36.05, 120.33], [36.04, 120.32], [36.03, 120.31]]),];
3、设置定时器，模拟轨迹移动
/**开始轨迹移动*/setInterval(function () {//标注集合var markers = [];//添加轨迹移动标注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//设置标注图标icon: bikeIcon,//开启移动状态autoStart: false,onEnd: function() {// TODO: blow up this marker//移动结束后移除map.removeLayer(this);}});//在新位置添加标注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//调用start方法，开始移动markers[i].start();}}, 5000);
4、完整示例代码
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>leaflet要素轨迹移动</title><link rel="stylesheet" href="/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style></head><body><div id="map"></div><script type="text/javascript" src="/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/AnimatedMarker.js"></script><script type="text/javascript" src="./js/jquery/jquery-1.11.2.min.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}./{z}/{x}/{y}.png', {attribution: ''}).addTo(map);//添加自定义图标var bikeIcon = L.icon({//图标地址iconUrl: './images/marker-bike-green-shadowed.png',//图标大小iconSize: [25, 39]});//轨迹线数组var routeLines = [L.polyline([[36.09, 120.35], [36.10, 120.36], [36.11, 120.37]]),L.polyline([[36.05, 120.33], [36.04, 120.32], [36.03, 120.31]]),];/**开始轨迹移动*/setInterval(function () {//标注集合var markers = [];//添加轨迹移动标注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//设置标注图标icon: bikeIcon,//开启移动状态autoStart: false,onEnd: function() {// TODO: blow up this marker//移动结束后移除map.removeLayer(this);}});//在新位置添加标注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//调用start方法，开始移动markers[i].start();}}, 5000);</script></body></html>
