Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
场景
Vue+Leaflet实现加载OSM显示地图:
Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客
在上面的基础上,怎样使用插件MovingMarker实现标记移动效果。
效果
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、插件地址
GitHub - ewoken/Leaflet.MovingMarker: A Leaflet plug-in to create moving marker
2、下载仓库代码,复制其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移动点位(轨迹回放效果)</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);//点击标记开始/暂停//========================================================================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>点我暂停 !</b>').openPopup();}, 2000);});marker1.bindPopup('<b>点我开始</b> !</b>', {closeOnClick: false});marker1.openPopup();//=========================================================================//添加一个循环走的标记var marker3 = L.Marker.movingMarker(londonBrusselFrankfurtAmsterdamLondon,[2000, 2000, 2000, 2000], {autostart: true,loop: true}).addTo(map);marker3.loops = 0;marker3.bindPopup('', {closeOnClick: false});//=========================================================================//设置循环loop事件,进行循环次数计数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('点击地图使我移动 !');marker4.openPopup();}}}, 2000);}});//marker4的默认位置var marker4 = L.Marker.movingMarker([[45.816667, 15.983333]], []).addTo(map);//设置地图的点击事件,使标记移动到点击的位置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>
Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)相关推荐
- Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
- Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
- Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
- Leaflet中使用leaflet-sidebar插件实现侧边栏效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现地图侧边栏效 ...
- Leaflet中使用leaflet-search插件实现搜索定位效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现搜索定位效果 ...
- Leaflet中使用NavBar插件实现导航(前进后退)效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet教程 在上面实现加载地图显示的基础上. 导航组件主要用于 ...
- Leaflet中使用Leaflet-MiniMap插件实现小地图效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现小地图效果如 ...
- Leaflet中使用leaflet-cion-pulse插件实现波动的图标效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用插件实现波动的图标效 ...
- Leaflet中使用awesome-markers插件显示带图标的marker
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,实现Marker上带图标 ...
最新文章
- Spring AOP是什么?你都拿它做什么?
- Python中url的编码以及解码
- java 自定义对象 排序,使用自定义排序顺序对对象的ArrayList进行排序
- 【二分】Producing Snow @Codeforces Round #470 Div.2 C
- IBM Machine Learning学习笔记——Time Series and Survival Analysis
- oracle分段分组函数,Oracle增强型分组函数
- Linux执行U盘里内程序,Linux 最小系统挂载U盘(SD、TF卡)并执行程序
- [求助]关于服务器之间的文件拷贝问题,没有头绪,希望大家指点一二
- 台式计算机如何连接网络,台式机如何去连接网络
- Qt——原地奔跑的小人
- 随机过程之平稳过程与各态历经过程
- vb.net如何查询电脑麦克风收到声音_拔掉 MacBook,用 8GB 树莓派来办公的体验如何?...
- CEPH概述及实验(CEPH部署及群集搭建+节点扩容+数据恢复)
- C++及数据结构复习笔记(十二)(列表)
- 为什么要学Java,这8大优势告诉你!
- 5个超棒的Java企业级项目推荐,练手/毕设/私活都一步到位
- linux防火墙关了端口还是不通,为什么linux防火墙关了 端口不通
- FreeEIM 2.9 官方简体中文版发布
- ikun必学!python 画一个简单的只因
- 伺服电机驱动器的一些简单相关分析