基于Leaflet的轨迹模拟回放
【摘要】 在gis场景中,轨迹回放是一个很常见的场景。比如在导航软件中,在行程结束后根据运动轨迹生成运动图,在keep软件中,会自动记录用户的锻炼轨迹,在结束后可以看到自己的运动轨迹等等。这些需求都是设备在运行中自动记录相应的点,在结合gis模拟即可。本文将采用Leaflet进行模拟轨迹回放。
在gis场景中,轨迹回放是一个很常见的场景。比如在导航软件中,在行程结束后根据运动轨迹生成运动图,在keep软件中,会自动记录用户的锻炼轨迹,在结束后可以看到自己的运动轨迹等等。这些需求都是设备在运行中自动记录相应的点,在结合gis模拟即可。本文将采用Leaflet进行模拟轨迹回放。
环境:
1、leaflet.js
2、MovingMarker.js 插件
一、创建地图
// initialize the map on the "map" div with a given center and zoom var map = new L.Map('map', { zoom: 6, minZoom: 3, }); // create a new tile layer var tileUrl = 'http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', layer = new L.TileLayer(tileUrl, { attribution: 'Maps © <a href=\"www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors', maxZoom: 18 }); // add the layer to the map map.addLayer(layer);
二、设置行为轨迹
var parisKievLL = [[28.8567, 112.3508], [30.45, 130.523333]]; var londonParisRomeBerlinBucarest = [[31.507222, 110.1275], [28.8567, 112.3508], [31.9, 112.5], [31.516667, 113.383333], [31.4166,126.1]]; var londonBrusselFrankfurtAmsterdamLondon = [[21.507222, 110.1275], [30.85, 114.35], [30.116667, 118.683333], [22.366667, 114.9], [31.507222, 110.1275]]; var barcelonePerpignanPauBordeauxMarseilleMonaco = [ [21.385064, 112.173403], [23.698611, 114.895556], [24.3017, 114.3686], [34.837912, 115.579541], [33.296346, 116.369889], [35.738418, 116.424616] ]; map.fitBounds(londonParisRomeBerlinBucarest);
三、设置运动的marker
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>', {closeOnClick: false}); marker1.openPopup();
四、效果如下所示:
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)