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

以你之姓@ 2023-10-01 12:26 8阅读 0赞

## 场景 ##

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

[Vue+Leaflet实现加载OSM显示地图\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客][Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]

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

效果

![cd82dd27f12b45eaba426784557c4f46.gif][]

注：

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

## 实现 ##

1、插件地址

[GitHub - ewoken/Leaflet.MovingMarker: A Leaflet plug-in to create moving marker][GitHub - ewoken_Leaflet.MovingMarker_ A Leaflet plug-in to create moving marker]

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

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

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/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>

[Vue_Leaflet_OSM_BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394
[cd82dd27f12b45eaba426784557c4f46.gif]: https://img-blog.csdnimg.cn/cd82dd27f12b45eaba426784557c4f46.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[GitHub - ewoken_Leaflet.MovingMarker_ A Leaflet plug-in to create moving marker]: https://github.com/ewoken/Leaflet.MovingMarker
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a3165d6b1ec6449bb10f55f1cb3aee9b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16