Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)

场景

Vue+Leaflet实现加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

在上面的基础上，怎样使用插件MovingMarker实现标记移动效果。

效果

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、插件地址

https://github.com/ewoken/Leaflet.MovingMarker

2、下载仓库代码，复制其MovingMarker.js核心文件

3、引入leaflet所需的文件以及该js文件

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript" src="./js/MovingMarker.js"></script>

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;
             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/MovingMarker.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 parisKievLL = [
            [48.8567, 2.3508],
            [50.45, 30.523333]
        ];
        var londonParisRomeBerlinBucarest = [
            [51.507222, -0.1275],
            [48.8567, 2.3508],
            [41.9, 12.5],
            [52.516667, 13.383333],
            [44.4166, 26.1]
        ];
        var londonBrusselFrankfurtAmsterdamLondon = [
            [51.507222, -0.1275],
            [50.85, 4.35],
            [50.116667, 8.683333],
            [52.366667, 4.9],
            [51.507222, -0.1275]
        ];
        var barcelonePerpignanPauBordeauxMarseilleMonaco = [
            [41.385064, 2.173403],
            [42.698611, 2.895556],
            [43.3017, -0.3686],
            [44.837912, -0.579541],
            [43.296346, 5.369889],
            [43.738418, 7.424616]
        ];


        map.fitBounds(londonParisRomeBerlinBucarest);

        //点击标记开始/暂停
        //========================================================================
        var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);
        L.polyline(parisKievLL).addTo(map);
        marker1.once('click', function () {
            marker1.start();
            marker1.closePopup();
            marker1.unbindPopup();
            marker1.on('click', function () {
                if (marker1.isRunning()) {
                    marker1.pause();
                } else {
                    marker1.start();
                }
            });
            setTimeout(function () {
                marker1.bindPopup('<b>点我暂停 !</b>').openPopup();
            }, 2000);
        });

        marker1.bindPopup('<b>点我开始</b> !</b>', {
            closeOnClick: false
        });
        marker1.openPopup();

        //=========================================================================
        //添加一个循环走的标记
        var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,
            [2000, 2000, 2000, 2000], {
                autostart: true,
                loop: true
            }).addTo(map);

        marker3.loops = 0;
        marker3.bindPopup('', {
            closeOnClick: false
        });

        //=========================================================================
        //设置循环loop事件，进行循环次数计数
        marker3.on('loop', function (e) {
            marker3.loops++;
            if (e.elapsedTime < 50) {
                marker3.getPopup().setContent("<b>Loop: " + marker3.loops + "</b>")
                marker3.openPopup();
                setTimeout(function () {
                    marker3.closePopup();

                    if (!marker1.isEnded()) {
                        marker1.openPopup();
                    } else {
                        if (marker4.getLatLng().equals([45.816667, 15.983333])) {
                            marker4.bindPopup('点击地图使我移动 !');
                            marker4.openPopup();
                        }

                    }

                }, 2000);
            }
        });

        //marker4的默认位置
        var marker4 = L.Marker.movingMarker([
            [45.816667, 15.983333]
        ], []).addTo(map);

        //设置地图的点击事件，使标记移动到点击的位置
        map.on("click", function (e) {
            marker4.moveTo(e.latlng, 2000);
        });

        //=========================================================================

        var marker5 = L.Marker.movingMarker(
            barcelonePerpignanPauBordeauxMarseilleMonaco,
            10000, {
                autostart: true
            }).addTo(map);

        marker5.addStation(1, 2000);
        marker5.addStation(2, 2000);
        marker5.addStation(3, 2000);
        marker5.addStation(4, 2000);

        L.polyline(barcelonePerpignanPauBordeauxMarseilleMonaco, {
            color: 'green'
        }).addTo(map);
       
    </script>
</body>

</html>

博客园： https://www.cnblogs.com/badaoliumangqizhi/ 关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。