JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）

关于车辆的轨迹回放功能方法，主要分为两种，一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；两种方法，各有各的优缺点，前者是比较简单，但是不能在中途控制速度；后者的功能比较全面，但是目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器，而且巡航作为动画过程是非常耗费性能的。

下面我将用不同的方法来实现这个轨迹回放，首先使用一个简单标记点的方法，效果如下：

具体的代码如下：

function initLine() {//首先需要得到一串线路的定位点的数组，如： lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];//其次如果需要在车辆移动时展示信息框中每个点的信息，那就需要有个信息框的数据信息：如gpsLocus = [{gdLongitude:116.478935,gdLatitude:39.997761,code:'0',time:'2021-07-28 14:12'},{gdLongitude:116.478939,gdLatitude:39.997825,code:'1',time:'2021-07-28 14:13'}]等等，我就不一一写出来了，总之线路点的经纬度要与信息框的经纬度一一对应才行if (trackMarker) {// 1、清空之前数据map.remove(trackMarker)map.remove(trackPolyline)map.remove(passedPolyline)if (carWindow) {carWindow.close()}}//2、创建汽车点位点const position = 线路数据的第一个点的经纬度，如：lineArr[0]trackMarker = new AMap.Marker({map: map,position: position,icon: 'https://webapi.amap.com/images/car.png',offset: new AMap.Pixel(-26, -13),autoRotation: true,angle: -90,})// 3、创建信息框carWindow = new AMap.InfoWindow({offset: new AMap.Pixel(6, -25),content: ''})// 4、绘制轨迹trackPolyline，这个轨迹是相当于总览展示，如果要控制是否显示整条线路的话，可以通过线路的show()和hide()方法控制trackPolyline = new AMap.Polyline({map: map,path: lineArr,showDir: true,strokeColor: '#28F',  //线颜色// strokeOpacity: 1,     //线透明度strokeWeight: 6,      //线宽// strokeStyle: "solid"  //线样式zIndex: 99999,})// 5、绘制行驶后的颜色passedPolyline = new AMap.Polyline({map: map,strokeColor: '#AF5',  //线颜色strokeWeight: 6,      //线宽zIndex: 99999,})// 行驶过后改变颜色trackMarker.on('moving', (e) => {passedPolyline.setPath(e.passedPath)})// 6.信息框随车辆移动AMap.event.addListener(trackMarker, 'moving', (e) => {var lastLocation = e.passedPath[e.passedPath.length - 1]carWindow.setPosition(lastLocation)//调用信息框的信息，进行对比etVehicleSpeedInWidowns(lastLocation)})// 7.打开速度框carWindow.open(map,trackMarker.getPosition())// 8.地图自适应缩放map.setFitView(trackMarker)map.setZoom(10)}//对比信息框的经纬度与移动中经纬度是否相同，相同就把信息框里的内容展示出来function etVehicleSpeedInWidowns (lnglat) {for (var i = 0; i < gpsLocus.length; i++) {if (lnglat.lat == gpsLocus[i].gdLatitude && lnglat.lng == gpsLocus[i].gdLongitude) {const info = trackInfo(gpsLocus[i])carWindow.setContent(info.join(''))return}}},//信息框里的内容自定义function  trackInfo (obj) {const info = []info.push(`<p  style='min-width:200px;'   class='input-item'>设备号 :${obj.code || '未知'}</p>`)info.push(`<p  style='min-width:200px;'   class='input-item'>时间:${obj.time|| '未知'}</p>`)return info}

这里准备工作就做的差不多了，接下来就是控制车辆的运动了：

    //调用开始动画的方法function startAnimation () {trackMarker.moveAlong(lineArr, 200);//lineArr:指小车运行的路线，200：指运行速度，单位千米/小时}//暂停动画的方法function pauseAnimation () {trackMarker.pauseMove();}
//继续动画的方法function resumeAnimation () {trackMarker.resumeMove();}
//停止动画的方法function stopAnimation () {trackMarker.stopMove();}//所以要想动画动起来，就直接调用startAnimation()

JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）相关推荐

JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（下）
上篇文章提到了车辆的轨迹回放主要有两个方案:一种是通过标记点moveAlong()的方法,另一种是PathSimplifier是一个轨迹展示组件:上篇使用了标记点的方法,这篇就来使用PathSimpl ...
高德地图实现路线规划+轨迹回放（显示车牌）
联系作者Q/V:783021975 Tips: 1.高德好的方法非同步执行.一定要注意执行顺序或等待执行完成再进行具体的操作 2.高德地图不支持label旋转哦~ 3.百度是支持的.可以参考百度地图 ...
调用高德地图展示车辆行驶轨迹
如何在页面中使用高德地图并分页展示多段历史轨迹引入高德地图的JavaScript API 打开index.html(key-后面的内容是你自己在高德上申请的key) 引入高德组件配置webpac ...
uni-app实现地图车辆移动轨迹回放
uni-app实现地图车辆移动轨迹回放 <template><view><view><map id="Map" style="w ...
JSAPI 高德地图应用--线路规划、多条线路同时展示
在地图应用中,常见的应用之一应该就有查询两个地方的线路规划吧,高德地图提供了驾车路线规划.货车路线规划.公车换乘服务.步行导航服务.骑行路径规划服务等,这里我用的是驾车路线规划做一个列子. 驾车路线规 ...
使用高德地图API实现历史轨迹查询
欢迎大家关注我的公众号,有问题可以及时和我交流. 使用高德地图API完成历史轨迹查询创作背景相关技术设计思路实现难点编码实现实现效果创作背景因为对历史轨迹查询比较好奇,所以使用 ...
Vue项目引用高德地图实现车辆轨迹回放
一.引入高德地图jsApi 在项目入口index.html页面以cdn方式引入 <script src="https://webapi.amap.com/maps?v=1.4.15&a ...
利用百度地图抓取公交信息实现三维地图车辆跟踪轨迹回放
MapVGL,是一款基于WebGL的地理信息可视化库,是一款基于百度地图的大数据可视化开源库,可以用来展示大量基于3D的地理信息点线面数据.设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫 ...
JSAPI 高德地图应用---批量初始化点标记、矢量图形
在高德地图的应用中,地图上展示我们自己自定义覆盖物是很常见的应用,前提是需要覆盖物相应的定位点以及图标即可,但矢量图形不能直接展示图标,可以在信息框中展示:这里我就弄一个标记点的初始化,并且添加上信息 ...

JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）

JSAPI 高德地图应用--车辆的轨迹回放、并附有信息框（上）相关推荐

最新文章

热门文章