Leaflet中使用Leaflet.AnimatedMarker外掛實現要素軌跡移動
阿新 • • 發佈：2022-04-09
場景
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/[email protected]/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/[email protected]/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>