當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2025/3/19 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

場景

Leaflet快速入門與加載OSM顯示地圖：

Leaflet快速入門與加載OSM顯示地圖_霸道流氓氣質(zhì)的博客-CSDN博客_leaflet 顯示地圖

在上面的基礎(chǔ)上怎樣實(shí)現(xiàn)要素軌跡移動效果。

插件地址：

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

注：

博客：
霸道流氓氣質(zhì)的博客_CSDN博客-C#,架構(gòu)之路,SpringBoot領(lǐng)域博主
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

1、下載插件并引入依賴

2、添加自定義圖標(biāo)和軌跡數(shù)據(jù)組，這里是兩條軌跡路線

//添加自定義圖標(biāo)var bikeIcon = L.icon({//圖標(biāo)地址iconUrl: './images/marker-bike-green-shadowed.png',//圖標(biāo)大小iconSize: [25, 39]});//軌跡線數(shù)組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、設(shè)置定時器，模擬軌跡移動

/**開始軌跡移動*/setInterval(function () {//標(biāo)注集合var markers = [];//添加軌跡移動標(biāo)注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//設(shè)置標(biāo)注圖標(biāo)icon: bikeIcon,//開啟移動狀態(tài)autoStart: false,onEnd: function() {// TODO: blow up this marker//移動結(jié)束后移除map.removeLayer(this);}});//在新位置添加標(biāo)注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//調(diào)用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);//添加自定義圖標(biāo)var bikeIcon = L.icon({//圖標(biāo)地址iconUrl: './images/marker-bike-green-shadowed.png',//圖標(biāo)大小iconSize: [25, 39]});//軌跡線數(shù)組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 () {//標(biāo)注集合var markers = [];//添加軌跡移動標(biāo)注$.each(routeLines, function (i, routeLine) {var marker = L.animatedMarker(routeLine.getLatLngs(), {//設(shè)置標(biāo)注圖標(biāo)icon: bikeIcon,//開啟移動狀態(tài)autoStart: false,onEnd: function() {// TODO: blow up this marker//移動結(jié)束后移除map.removeLayer(this);}});//在新位置添加標(biāo)注map.addLayer(marker);markers.push(marker);});for (var i = 0; i < markers.length; i++) {//調(diào)用start方法，開始移動markers[i].start();}}, 5000);</script> </body></html>

總結(jié)

以上是生活随笔為你收集整理的Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Leaflet中使用leaflet.po
下一篇： Leaflet中使用Leaflet-ec