场景

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="https://unpkg.com/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="https://unpkg.com/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}.tile.openstreetmap.org/{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>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136022.html