高德地图实现对应车辆的轨迹回放与轨迹的清除重绘制(浏览器支持: PathSimplifier目前依赖Canvas进行绘制,因此不支持IE9及以下浏览器)
2018-03-10 14:26
2731 查看
最近项目实践中接触高德地图比较多,也发现高德地图新增了一系列的UI组件库,因此遇到一些新问题也只能自己琢磨。
页面需求:查询输入框实现车辆的对应轨迹,在地图上显示相应的轨迹(此处,上一辆车的轨迹必须清除才能绘制下一辆车的运动轨迹)
自己写了个类似功能的demo效果如下:
项目中一般是通过输入车牌号并通过查询按钮请求接口得到数据并进行渲染(效果图如下)
此处直接用静态数据+两个车辆按钮查询,直接贴入代码:
运行上述代码你会发现出现两条轨迹,然而,我们是想要实现将上一条轨迹清除然后重新绘制新的车辆的运动轨迹,在经过百度一系列说没办法实现轨迹清除,和通过下面两个方法都没办法清除之后
本着任何事情都能有对应的解决方法的想法,还是让自己找到了实现轨迹清除的方法,就是下面这段代码,完美的清除了上一条轨迹:
首先判断是否存在对应的轨迹组件示例,如果已经存在,则将该轨迹示例进行清空(此处曾尝试设置pathSimplifierIns=null也无法清除轨迹),清空的方法为通过setData传入空数组的轨迹数据。
在本例demo中,只需将setData加入renderTrace方法开头处,即可每次进行重绘~
在此,也给下导航器事件触发方法:
项目中往往还要对轨迹播放速度进行调整,只需通过如navg.setSpeed(num)进行设置即可
页面需求:查询输入框实现车辆的对应轨迹,在地图上显示相应的轨迹(此处,上一辆车的轨迹必须清除才能绘制下一辆车的运动轨迹)
自己写了个类似功能的demo效果如下:
项目中一般是通过输入车牌号并通过查询按钮请求接口得到数据并进行渲染(效果图如下)
此处直接用静态数据+两个车辆按钮查询,直接贴入代码:
<!doctype html> <html lang="zh-CN"> <head> <!-- 原始地址://webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html --> <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" /> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <title>简单路径</title> <style> html, body, #container { width: 100%; height: 100%; margin: 0px; } .btn-group{ position:absolute; z-index: 10; right: 10px; bottom:50px; } .btn-group button{ background-color:cornflowerblue; color:#fff; } </style> </head> <body> <div id="container"></div> <div class="btn-group"> <button class="btn-car1">车辆一模拟</button> <button class="btn-car2">车辆二模拟</button> </div> <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=您申请的key值'></script> <!-- UI组件库 1.0 --> <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> <script type="text/javascript"> //创建地图 var map = new AMap.Map('container', { zoom: 4 }); //此处静态模拟两辆车数据: var Path={"car1": [ [116.405289, 39.904987], [113.964458, 40.54664], [111.47836, 41.135964], [108.949297, 41.670904], [106.380111, 42.149509], [103.774185, 42.56996], [101.135432, 42.930601], [98.46826, 43.229964], [95.777529, 43.466798], [93.068486, 43.64009], [90.34669, 43.749086], [87.61792, 43.793308] ], "car2":[ [113.964458, 40.54664], [98.46826, 43.229964], [116.405289, 39.904987], [103.774185, 42.56996], ]},navg1; //轨迹渲染函数,参数(Path:对应车辆的经纬度数组即轨迹相关数据) function renderTrace(Path){ AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) { if (!PathSimplifier.supportCanvas) { alert('当前环境不支持 Canvas!'); return; } var pathSimplifierIns = new PathSimplifier({ zIndex: 100, //autoSetFitView:false, map: map, //所属的地图实例 getPath: function(pathData, pathIndex) { return pathData.path; }, getHoverTitle: function(pathData, pathIndex, pointIndex) { if (pointIndex >= 0) { //point return pathData.name + ',点:' + pointIndex + '/' + pathData.path.length; } return pathData.name + ',点数量' + pathData.path.length; }, renderOptions: { renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1 } }); window.pathSimplifierIns = pathSimplifierIns; //设置数据 pathSimplifierIns.setData([{ name: '路线0', path:Path//传入的轨迹数据 }]); //对第一条线路(即索引 0)创建一个巡航器 navg1 = pathSimplifierIns.createPathNavigator(0, { loop: false, //循环播放 speed: 1000000 //巡航速度,单位千米/小时 }); navg1.start(); map.setFitView();//根据地图上添加的覆盖物分布情况,自动缩放地图到合适的视野级别,参数overlayList默认为当前地图上添加的所有覆盖物图层 }); } document.getElementsByClassName("btn-car1")[0].addEventListener("click",function(){ renderTrace(Path.car1); }); document.getElementsByClassName("btn-car2")[0].addEventListener("click",function(){ renderTrace(Path.car2); }); </script> </body> </html>
运行上述代码你会发现出现两条轨迹,然而,我们是想要实现将上一条轨迹清除然后重新绘制新的车辆的运动轨迹,在经过百度一系列说没办法实现轨迹清除,和通过下面两个方法都没办法清除之后
clearMap( ) | 删除地图上所有的覆盖物 |
remove(overlayers:Array) | 删除地图覆盖物数组,数组为一个或多个覆盖物。 |
if (window.pathSimplifierIns) { //通过该方法清空上次传入的轨迹 pathSimplifierIns.setData([]); }
首先判断是否存在对应的轨迹组件示例,如果已经存在,则将该轨迹示例进行清空(此处曾尝试设置pathSimplifierIns=null也无法清除轨迹),清空的方法为通过setData传入空数组的轨迹数据。
setData(data:Array) | 设定数据源数组,并触发重新绘制。data为空时将清除显示内容。 |
在此,也给下导航器事件触发方法:
start(pointIndex:number) | 开始路径巡航。 pointIndex用于指定巡航的起始节点索引,默认为节点索引范围( range)的最小值 如果是浮点类型,则整数部分表示起始点索引,小数部分表示起始点和下一节点间的比例位置。比如 7.5就表示 7~8的中间位置 | |
pause() | 暂停巡航 | |
resume() | 恢复巡航 | |
stop() | 停止巡航,同时清除已经过路径(这一点不同于pause) | |
destroy() | 销毁巡航器。巡航作为动画过程是非常耗费性能的,因此不再需要时应及时销毁 |
setSpeed(speed:number) | 设定巡航器的速度,单位千米/小时 |
相关文章推荐
- html5 FileReader+Canvas 前端压缩图片(IE9及以下浏览器不支持)
- 用Javascript和canvas实现的涂鸦板,似乎不支持IE8及以下浏览器
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
- js实现回放拖拽轨迹从过程上进行分析
- js实现回放拖拽轨迹从过程上进行分析
- js实现回放拖拽轨迹从过程上进行分析
- 使ie9以下版本支持canvas,css3等主流html5技术的方法
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
- 高德地图实现公交路线-添加标记-轨迹回放-中心点-图层
- 百度地图进行车辆轨迹回放开发时碰到的问题
- canvas轨迹回放功能实现
- 原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,有实例Demo
- js实现回放拖拽轨迹从过程上进行分析
- 给不支持classList的浏览器(ie9以及以下等)的元素添加classList属性
- javaweb实现在百度地图上的轨迹回放功能,action传入大量的参数到JSP的JavaScript中,实现绘制轨迹功能
- 自定义插件-让IE9以下的浏览器支持H5属性placeholder
- openlayers 3 实现车辆轨迹回放
- 让IE9以下的浏览器支持圆角及CSS3新特性
- 论坛源码推荐(8月14日):基于高德地图iOS SDK的轨迹回放库,用Swift实现的设计模式
- Android-使用OpengGL实现的Canvas进行绘制(简单介绍)