leaflet之轨迹回放（一 Leaflet.MovingMarker）

需求：

实现前提:

1、老规矩 github看作者文档, 尝试读一读源码 上链接：
https://github.com/ewoken/Leaflet.MovingMarker2、引入  import "./untils/moveMarker.js";

实现步骤

let config = { id: 'id', // 唯一标识, 后期删除轨迹要用iconUrl: 'https:******.png',  // iconUrlspeed: 10000, // 速度latlngs: [[lat1，lng2], [lat2，lng2], …],html: `<div> .... </div>`  // 标牌, 样式自理
}
this.handleCreateTrack(config);

 handleCreateTrack(config) {let featureGroup = [];// 轨迹线let routeLine = L.polyline(config.latlngs, {weight: 4,opacity: 0.7, // 定义线的透明度});// 定位该线至可视窗口this.map.fitBounds(routeLine.getBounds());// 创建iconlet carIcon = L.icon({iconSize: [30, 30],iconUrl: config.iconUrl,});// 动态markerlet animatedMarker = L.Marker.movingMarker(routeLine.getLatLngs(),config.speed, // 以下配置项在github上有详细注解-----{autostart: true,loop: false,icon: carIcon,rotate: false,}).bindPopup(config.html);// 移动结束时弹出标牌animatedMarker.on("end", function () {animatedMarker.openPopup();});// 记录划线过程let path = [];animatedMarker.on("move", (res) => {// 回调中会返回经纬度信息，点移动改变地图中心点this.map.panTo([res.latlng.lat, res.latlng.lng]) // 动态画已走路线let polyline = ...});featureGroup.push(animatedMarker);featureGroup.push(routeLine);let featureGroup = L.featureGroup(featureGroup);// 记录地图上的点、线、面 ... 根据id 可动态删除this.clusterLayer.push({type: config.id,value: featureGroup,});this.map.addLayer(featureGroup);},

结果

leaflet之轨迹回放（一 Leaflet.MovingMarker）相关推荐

Leaflet中使用MovingMarker插件实现标记移动(轨迹回放效果)
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上,怎样使用插件Moving ...
基于Leaflet的轨迹模拟回放
在gis场景中,轨迹回放是一个很常见的场景.比如在导航软件中,在行程结束后根据运动轨迹生成运动图,在keep软件中,会自动记录用户的锻炼轨迹,在结束后可以看到自己的运动轨迹等等.这些需求都是设备在运行 ...
基于Leaflet实现路径轨迹回放功能
效果图: 说明: 1.该功能是在这篇博客基础上完成的:ArcGIS JS API 实现路径轨迹回放但是里面有点小问题:首先,小车并不是匀速运动的,而是每一段的运行时间固定,所以在该博客上进行了修改 ...
leaflet 绘制轨迹
// 轨迹var gjtc = {layers:[]};var londonBrusselFrankfurtAmsterdamLondon = [[51.507222, -0.1275], [50.8 ...
百度地图轨迹回放,自定义路书,边走边画线
转自:https://www.cnblogs.com/syj2016/p/5685294.html 百度地图轨迹回放,自定义路书,边走边画线在原有的百度路书的基础上,做了修改,使其能实现边走边画线的 ...
js室内地图开发_如何使用JS来开发室内三维地图的轨迹回放功能
在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回放 ...
android中高德地图轨迹回放,轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API...
轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...
高德地图-轨迹回放（二）
利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的. 实现地图轨迹的主要函数如下 function track(){map.c ...
高德地图轨迹PHP,轨迹回放-点标记-示例中心-JS API 示例 | 高德地图API
轨迹回放 html, body, #container { height: 100%; width: 100%; } .input-card .btn{ margin-right: 1.2rem; w ...

leaflet之轨迹回放（一 Leaflet.MovingMarker）

leaflet之轨迹回放（一 Leaflet.MovingMarker）相关推荐

最新文章

热门文章