上篇文章提到了车辆的轨迹回放主要有两个方案：一种是通过标记点moveAlong()的方法，另一种是PathSimplifier是一个轨迹展示组件；上篇使用了标记点的方法，这篇就来使用PathSimplifier的轨迹展示的方法，同样的效果图：
在使用轨迹的巡航的时候要注意引入AMapUI的组件，具体引入方法可以参考官方例子：路径轨迹
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:'-07-28 14:12'},{gdLongitude:116.478939,gdLatitude:39.997825,code:'1',time:'-07-28 14:13'}]等等，我就不一一写出来了，总之线路点的经纬度要与信息框的经纬度一一对应才行 // 1、清空之前数据if (navg) {navg.destroy()if (.carWindow) {carWindow.close()}}// 3、创建信息框carWindow = new AMap.InfoWindow({offset: new AMap.Pixel(6, -25),content: '',})//使用轨迹的组件AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier, $) => {if (!PathSimplifier.supportCanvas) {alert('当前环境不支持 Canvas！')return}// 如果已存在巡航轨迹，则删除if (window.pathSimplifierIns && pathSimplifierIns) {//通过该方法清空上次传入的轨迹pathSimplifierIns.setData([])}//创建一个巡航轨迹路线pathSimplifierIns = new PathSimplifier({zIndex: 100,//地图层级，如果设置过高，可能会影响地图上其他覆盖物，所以需要注意map: map, //所属的地图实例//巡航路线轨迹列表getPath: (pathData, pathIndex) => {return pathData.path},//hover每一个轨迹点，展示内容getHoverTitle: (pathData, pathIndex, pointIndex) => {if (pointIndex >= 0) {return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length}return pathData.name + '，点数量' + pathData.path.length},//自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档//绘制路线节点renderOptions: {},})window.pathSimplifierIns = pathSimplifierIns//设置数据pathSimplifierIns.setData([{name: '路线0',path: lineArr ,}])//对第一条线路（即索引 0）创建一个巡航器navg =pathSimplifierIns.createPathNavigator(0, {loop: false, //循环播放speed: 1000,//巡航速度，单位千米/小时pathNavigatorStyle: {width: 48,//图中小车宽度height: 24,//图中小车高度initRotateDegree: -90,//初始旋转角度，默认0autoRotate: true,content: PathSimplifier.Render.Canvas.getImageContent('/images/car.png'),//图片的引入路径是打包后的路径,也就是index.html的图片引入路径strokeStyle: null,fillStyle: null,//经过路径的样式pathLinePassedStyle: {lineWidth: 8,strokeStyle: '#AF5',dirArrowStyle: {stepSpace: 15,strokeStyle: 'white',},},},})//调用播放的方法startTrack()//对车辆移动进行监听，控制信息框的展示navg.on('move', (data, position) => {isCursorAtPathEnd = falseconst idx = position.dataItem.pointIndex //走到了第几个点// 打开信息窗体const content = ['<div style="padding: 5px;">','<div>设备号: ' + gpsLocus[idx].code + '</div>','<div>定位时间：' + gpsLocus[idx].time + '</div>','</div>',]carWindow.setContent(content.join(''))carWindow.open(map, lineArr[idx])// 如果到头了，回到初始状态if (navg.isCursorAtPathEnd()) {// 轨迹回放停止，要改变播放按钮状态}})})}// 开始播放function startTrack () {navg.start()}// 继续轨迹播放function resumeTrack () {//继续动画navg.resume()}// 暂定轨迹播放function pauseTrack () {navg.pause()}// 停止播放function stopTrack () {navg.stop()}
这里如果想要对车辆移动进行速度改变就使用：navg.setSpeed(speed)，将想要的速度传入即可。
