场景

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

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

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

插件地址：

https://github.com/openplans/Leaflet.AnimatedMarker

注：

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

实现

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>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果) Leaflet中使用leaflet-search插件实现搜索定位效果 Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点) Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形 Leaflet中使用layerGroup图层组实现图层切换 Leaflet中使用markerCluster实现点聚合效果 leaflet的使用使用leaflet在高德地图中渲染轨迹(线条) 在vue中使用leaflet加载地图【GIS】leaflet插件（转）