今天来实现轨迹动画让小车沿着路线动起来。动画实际可以理解为对轨迹的模拟当路径成功生成后激发对路径的模拟这里用判断语句来实现这个逻辑driving.search(start,end,opts,function(status, result){ if(statuscomplete){ // 实现轨迹的模拟 }else{ } })一、创建小车标记先做一个小车的标记var marker new AMap.Marker({ map: map, position: start, icon: https://webapi.amap.com/images/car.png, offset: new AMap.Pixel(-26, -13), autoRotation: true, angle: -180, })这个小车规定了自动旋转起始位置在起点显示在地图上。offset设置图标偏移量让图标中心对准路线。autoRotation: true让小车沿着路线方向自动旋转车头。angle: -180设置初始角度。二、创建行驶轨迹线创建一个折线对象用来显示车行驶走过的路var passedPolyline new AMap.Polyline({ map: map, strokeColor: #AF5, // 描边的绿色 strokeWeight: 6, // 线宽 })定义路径属性绿色描边线宽6像素。三、绑定移动事件给marker的移动事件赋予回调函数也就是给折线定义具体的路径marker.on(moving, function(e) { passedPolyline.setPath(e.passedPath) })当小车移动时e.passedPath会返回已经走过的路径实时更新到passedPolyline上显示。四、设置小车移动先调整地图的显示范围然后规定小车移动参数map.setFitView() marker.moveAlong(lineArr, { duration: 500, autoRotation: true, })setFitView()让地图自动缩放到能看到完整路线的范围。moveAlong让小沿着lineArr路径移动duration: 500表示每个点之间移动耗时0.5秒autoRotation: true开启自动旋转。五、计算路径点数组这里有一个量还需要预定一下就是lineArr。之前在规划路径时路其实是由很多的散点顺序连接组成的这个lineArr就是存储这些散点而这些散点都是在result中存储的。也就是说生成路径后result结果就会返回当前轨迹对象其中包含了导航信息。那么就需要在判断体中先根据result计算lineArrvar lineArr [] result.routes[0].steps.forEach(function(item) { lineArr.push(...item.path) })点击开始动画按钮后地图先画出蓝色规划路线然后一辆小车出现在起点沿着路线开始移动。小车车头始终朝向行驶方向已经走过的路变成绿色轨迹线。地图自动缩放到合适范围完整展示行驶过程。六、总结轨迹动画的核心逻辑路径规划成功后从result中提取所有轨迹点组成lineArr创建小车标记和轨迹线绑定moving事件实时更新已走路径最后调用moveAlong让小车间隔0.5秒沿路线移动。到这里零基础WebGIS开发入门系列全部讲完。从地图显示、控件使用、点标记交互、矢量图形、几何计算、GeoJSON持久化到智慧校园项目的需求分析、打卡功能、路径规划、轨迹动画完整走了一遍WebGIS开发流程。下一期我们更新二维webgis开发的地图框架openlayers感兴趣的同学可以跟着一起学习。本期内容大家可以先上手看看有不懂的留言