Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
生活随笔
收集整理的這篇文章主要介紹了
Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
場(chǎng)景
Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖：
Vue+Leaflet實(shí)現(xiàn)加載OSM顯示地圖_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基礎(chǔ)上，怎樣使用插件MovingMarker實(shí)現(xiàn)標(biāo)記移動(dòng)效果。
效果
注：
博客：
https://blog.csdn.net/badao_liumang_qizhi?
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。
實(shí)現(xiàn)
1、插件地址
GitHub - ewoken/Leaflet.MovingMarker: A Leaflet plug-in to create moving marker
2、下載倉(cāng)庫(kù)代碼，復(fù)制其MovingMarker.js核心文件
3、引入leaflet所需的文件以及該js文件
?<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script type="text/javascript" src="./js/MovingMarker.js"></script>4、完整示例代碼
? <!doctype html> <html lang="en"><head><meta charset="UTF-8"><title>leaflet移動(dòng)點(diǎn)位(軌跡回放效果)</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/MovingMarker.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 parisKievLL = [[48.8567, 2.3508],[50.45, 30.523333]];var londonParisRomeBerlinBucarest = [[51.507222, -0.1275],[48.8567, 2.3508],[41.9, 12.5],[52.516667, 13.383333],[44.4166, 26.1]];var londonBrusselFrankfurtAmsterdamLondon = [[51.507222, -0.1275],[50.85, 4.35],[50.116667, 8.683333],[52.366667, 4.9],[51.507222, -0.1275]];var barcelonePerpignanPauBordeauxMarseilleMonaco = [[41.385064, 2.173403],[42.698611, 2.895556],[43.3017, -0.3686],[44.837912, -0.579541],[43.296346, 5.369889],[43.738418, 7.424616]];map.fitBounds(londonParisRomeBerlinBucarest);//點(diǎn)擊標(biāo)記開(kāi)始/暫停//========================================================================var marker1 = L.Marker.movingMarker(parisKievLL, [10000]).addTo(map);L.polyline(parisKievLL).addTo(map);marker1.once('click', function () {marker1.start();marker1.closePopup();marker1.unbindPopup();marker1.on('click', function () {if (marker1.isRunning()) {marker1.pause();} else {marker1.start();}});setTimeout(function () {marker1.bindPopup('<b>點(diǎn)我暫停 !</b>').openPopup();}, 2000);});marker1.bindPopup('<b>點(diǎn)我開(kāi)始</b> !</b>', {closeOnClick: false});marker1.openPopup();//=========================================================================//添加一個(gè)循環(huán)走的標(biāo)記var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,[2000, 2000, 2000, 2000], {autostart: true,loop: true}).addTo(map);marker3.loops = 0;marker3.bindPopup('', {closeOnClick: false});//=========================================================================//設(shè)置循環(huán)loop事件，進(jìn)行循環(huán)次數(shù)計(jì)數(shù)marker3.on('loop', function (e) {marker3.loops++;if (e.elapsedTime < 50) {marker3.getPopup().setContent("<b>Loop: " + marker3.loops + "</b>")marker3.openPopup();setTimeout(function () {marker3.closePopup();if (!marker1.isEnded()) {marker1.openPopup();} else {if (marker4.getLatLng().equals([45.816667, 15.983333])) {marker4.bindPopup('點(diǎn)擊地圖使我移動(dòng) !');marker4.openPopup();}}}, 2000);}});//marker4的默認(rèn)位置var marker4 = L.Marker.movingMarker([[45.816667, 15.983333]], []).addTo(map);//設(shè)置地圖的點(diǎn)擊事件，使標(biāo)記移動(dòng)到點(diǎn)擊的位置map.on("click", function (e) {marker4.moveTo(e.latlng, 2000);});//=========================================================================var marker5 = L.Marker.movingMarker(barcelonePerpignanPauBordeauxMarseilleMonaco,10000, {autostart: true}).addTo(map);marker5.addStation(1, 2000);marker5.addStation(2, 2000);marker5.addStation(3, 2000);marker5.addStation(4, 2000);L.polyline(barcelonePerpignanPauBordeauxMarseilleMonaco, {color: 'green'}).addTo(map);</script> </body></html>?總結(jié)
以上是生活随笔為你收集整理的Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Leaflet中通过leaflet-me
- 下一篇： Leaflet中使用Leaflet.fu