（轨迹播放）有两种方式：第一种是使用JSAPI和AMap.PolyLine（折线）等图形来实现。二是使用JSAPI结合AMapUI组件库，使用PathSimplifier（轨迹显示组件）绘制动作轨迹。解决方案选择以上两种实现方式我们可以根据两个因素来决定哪种更适合我们：节点的数量和排列的密度。前者适用于节点数量少、排列相对松散的情况。例如，回放出租车轨迹时，出租车行驶速度较高，周期性上报时间会比较长。后者更针对节点多、排列密集的路径、以秒为单位记录位置的飞行器轨迹、精细的地理边界等。无论实施过程如何，我们都需要先收集客户上报的信息。这些信息可以定制。通常我们会包括：经纬度、速度、反编码后的地理位置、方向、高度等基本地理信息。同时，我们还可以添加一些自定义信息，比如：人员信息（头像昵称等），出行信息（订单等）。实现过程：客户端按一个（时间）周期上报地理信息和自定义信息。服务器按照时间轴存储客户上报的信息。根据（时间等）条件查询用户的轨迹，通过简化算法去除部分节点（例如节点间距离很小，或者多点在同一条直线上，3点之间，1点之间其中有细微的偏差，无法画出直线等），最终得到适合画画的路径（数组）。根据路径画出用户的动作轨迹。路径简化算法（可选）客户端上报的数据是按照时间段上报的，也就是说每个时间对应一个经纬度，经纬度在地图上是一个接一个的点。当这些点连起来的时候，我们就会得到不止N条折线。为了让画出的轨迹更漂亮，动作的过程更清晰流畅，我们通常需要一种算法来简化折线。例如：如果A点和B点之间的距离小于1个像素，那么可以去掉B点，只留下A点。A、B、C点在一条直线上，或B点仅稍微偏离A、C点形成的线段，即可去掉B点。这里官方推荐一个算法库simplify.js供大家参考，这里就不多说了。实现示例车辆轨迹回放这里我们使用第一种方式实现——使用JSAPI和AMap.PolyLine。实现原理：在地图上绘制车辆标记（AMap.Marker）。使用AMap.PolyLine绘制两条轨迹：历史轨迹和行车轨迹，用颜色区分。使车辆以一定的速度前进，并监测Maker运动事件。在事件回调中，将车辆的位置（Marker）设置为地图的中心点，给用户一种车辆在向前行驶的主观感受，同时将行驶路线延伸过track。对于复杂的需要自定义处理的实现场景，例如：查看每个节点的数据，我们可以绘制每个节点，点击节点时显示该节点的数据。移动倍速播放，首先按照报出的时间间隔播放，选择倍速后，改变Marker移动的时长。其他定制。自定义API我们可以让车辆：startmovingpausemovingresumemovingstopmoving代码示例AMap.plugin('AMap.MoveAnimation',function(){varmarker,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]];varmap=newAMap.Map("container",{resizeEnable:true,center:[116.397428,39.90923],zoom:17});marker=newAMap.Marker({地图:地图,位置:[116.478935,39.997761],图标:"https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",偏移量:newAMap.Pixel(-13,-26),});//绘制历史轨迹varpolyline=newAMap.Polyline({map:map,path:lineArr,showDir:true,strokeColor:"#28F",//线条颜色//strokeOpacity:1,//线条透明度strokeWeight:6,//线条宽度//strokeStyle:"solid"//线条样式});//驶过轨道varpassedPolyline=newAMap.Polyline({map:map,strokeColor:"#AF5",//线条颜色strokeWeight:6,//线条宽度});//监听车辆移动事件marker.on('moving',function(e){//延长行驶路径passedPolyline.setPath(e.passedPath);//设置车辆位置为地图中心点map.setCenter(e.target.getPosition(),true)});地图.setFitView();//开始移动window.startAnimation=functionstartAnimation(){marker.moveAlong(lineArr,{//每段持续时间duration:500,//可以根据实际采集时间间隔来设置//JSAPI2.0是否自动设置沿路的角度。在moveAlong中设置autoRotation:true,});};//暂停运动window.pauseAnimation=function(){marker.pauseMove();};//恢复运动window.resumeAnimation=function(){marker.resumeMove();};//停止移动window.stopAnimation=function(){marker.stopMove();};});参考链接：https://lbs.amap.com/demo/jsapi-v2/example/marker/replaying-historical-running-data飞机飞行轨迹回放使用JSAPI和AMapUI组件库是配合PathSimplifier（轨迹显示组件）使用，绘制动作轨迹。这个方案比较简单，只需要一些配置。缺点，但是第二种方案没有实现原理：在地图上绘制飞机标记（AMap.Marker）。使用AMap.PolyLine绘制两条轨迹：历史轨迹和行车轨迹，用颜色区分。配置轨迹的颜色、动画的速度等。对于需要自定义处理的复杂实现场景，可以在PathSimplifier提供的回调中进行配置和处理。示例代码//加载PathSimplifier，loadUI的路径参数为模块名中'ui/'后的部分supportCanvas){alert('当前环境不支持Canvas！');return;}//起始页initPage(PathSimplifier);});functioninitPage(PathSimplifier){//创建组件实例varpathSimplifierIns=newPathSimplifier({zIndex:100,map:map,//所属的地图实例getPath:function(pathData,pathIndex){//返回轨迹数据中的节点坐标信息，[AMap.LngLat,AMap.LngLat...]or[[lng|number,lat|number],...]returnpathData.path;},getHoverTitle:function(pathData,pathIndex,pointIndex){//返回鼠标悬停时显示的信息if(pointIndex>=0){//鼠标悬停在某处ReturnpathData.name+',pointonthetracknode:'+pointIndex+'/'+pathData.path.length;}//鼠标悬停在连接点之间n个节点返回pathData.name+',点数'+pathData.path.length;}，渲染选项：{//轨迹的样式pathLineStyle:{strokeStyle:'red',lineWidth:6,dirArrowStyle:true}}});//这里构造两个简单的轨迹，仅举个例子pathSimplifierIns.setData([{name:'Trajectory0',path:[[100.340417,27.376994],[108.426354,37.827452],[113.392174,31.208439],[124.905846,476.]2322222]},{name:'Interpolationpoints',//创建一条包括500个测地线路径的线：PathSimplifier.getGeodesicPath([116.405289,39.904987],[87.61792,43.793308],500)}]);//创建巡洋舰varnavg0=pathSimplifierIns.createPathNavigator(0,//关联第一条轨道{loop:true,//loopspeed:1000000});navg0.start();}参考链接：https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index
