leaflet运动轨迹

Leaflet中使用MovingMarker插件实现标记移动

**
场景
Vue+Leaflet实现加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122317394

在上面的基础上，怎样使用插件MovingMarker实现标记移动效果。

效果
在这里插入图片描述

实现

1、插件地址

https://github.com/ewoken/Leaflet.MovingMarker

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运动轨迹相关推荐

supermap leaflet （二）运动点及轨迹
本篇文章用setInterval方法实现运动点及轨迹. 获取点位坐标组. var cord = [];for(var i = 0; i < 200; i++){cord[i] = [Math.r ...
基于Leaflet的轨迹模拟回放
在gis场景中,轨迹回放是一个很常见的场景.比如在导航软件中,在行程结束后根据运动轨迹生成运动图,在keep软件中,会自动记录用户的锻炼轨迹,在结束后可以看到自己的运动轨迹等等.这些需求都是设备在运行 ...
gatsby_如何使用Gatsby和Leaflet创建夏季公路旅行地图绘制应用程序
gatsby Get ready for the summer by building your own road trip mapping app with this step-by-step gu ...
leaflet地图框架
leaflet 中文API LeafLet js 官网: http://leafletjs.com/index.html LeafLet js 官网demo: http://leafletjs.com ...
自动跟随小车c语言,基于OpenCV的智能小车运动轨迹跟踪方法研究
摘要: 随着人工智能技术的快速发展,智能小车开发受到越来越多研究者的关注,也已经成为一个重要的研究方向,而解决智能小车在路径规划中行驶的运动故障重要手段是对其进行的视频监控,但是智能小车的视频监控只能 ...
react中试用leaflet简单起步
写在最前边,前不久的一个项目中要做一个地图的数据可视化需求.项目中用到了 Leaflet.项目到现在功能已经基本实现,现在写下来做一下记录.Demo是用 create-react-app 搭建的.源码 ...
css3运动后留下轨迹尾巴_球磨机的工作原理及机内运动轨迹分析
球磨机被广泛用于矿山.建筑材料.耐火材料.玻璃陶瓷等行业作为磨粉作业的主要设备.那么球磨机的工作原理及运动轨迹你都了解么?下面小编带你深入了解其原理及运动轨迹. 一.球磨机工作原理球磨机的主要部分& ...
Angular 个人深究（五）【外部包引用 Leaflet 简单实用】
2019独角兽企业重金招聘Python工程师标准>>> Leaflet 使用最近在Angular项目中,用到了地图,由于种种原因放弃了百度地图api使用,最后选择了leaflet, ...
vue+vuex+leaflet Jest单测踩坑指南
环境 Vue CLI 3 TypeScript 3.1.4 Leaflet 1.3.4 相关文档 vue-test-utils.vuejs.org/zh/guides/#- 踩坑 1.iview按需引 ...

leaflet运动轨迹

Leaflet中使用MovingMarker插件实现标记移动

leaflet运动轨迹相关推荐

最新文章

热门文章