場景

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插件（轉）