Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动

亦凉 2023-09-30 12:58 13阅读 0赞

## 场景 ##

Leaflet快速入门与加载OSM显示地图：

[Leaflet快速入门与加载OSM显示地图\_霸道流氓气质的博客-CSDN博客\_leaflet 显示地图][Leaflet_OSM_-CSDN_leaflet]

在上面的基础上怎样实现要素轨迹移动效果。

![cfbec84f9e424346a891f45abb7da50d.gif][]

插件地址：

[GitHub - openplans/Leaflet.AnimatedMarker: A Leaflet plugin to animated a Marker along a polyline][GitHub - openplans_Leaflet.AnimatedMarker_ A Leaflet plugin to animated a Marker along a polyline]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][CSDN_-C_SpringBoot]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、下载插件并引入依赖

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>

[Leaflet_OSM_-CSDN_leaflet]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
[cfbec84f9e424346a891f45abb7da50d.gif]: https://img-blog.csdnimg.cn/cfbec84f9e424346a891f45abb7da50d.gif
[GitHub - openplans_Leaflet.AnimatedMarker_ A Leaflet plugin to animated a Marker along a polyline]: https://github.com/openplans/Leaflet.AnimatedMarker
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi