WebGIS第十二课：智慧校园项目（4）

最后我们来谈一下动画的实现

动画实际可以理解为对轨迹的模拟，当路径成功生成后，激发对路径的模拟，这里用判断语句来实现这个逻辑：

                driving.search(start,end,opts,function(status, result){
                    if(status=='complete'){
                        // 实现轨迹的模拟
                        

                    }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,
                        })

这个小车规定了可以自动旋转，起始位置，并显示在地图上。

之后，就创建一个折线对象，用来显示车行驶需要走的路

                       var passedPolyline = new AMap.Polyline({
                            map:map,
                            strokeColor:'#AF5',//描边的绿色
                            strokeWeight:6,//线宽
                        })

                        marker.on('moving',function(e){
                            passedPolyline.setPath(e.passedPath)
                        })

 首先定义路径的属性，之后给marker的移动事件赋予回调函数，也就是给折线定义具体的路径。

之后，还需要给marker的移动进行设置

                        map.setFitView()
                        marker.moveAlong(lineArr,{
                            duration:500,
                            autoRotation: true,
                        })

先调整地图的显示范围，然后规定在车移动时，每个0.5s就一定一次，且开启自动旋转。这里有一个量还需要预定一下，就是lineArr。之前在规划路径是，路其实是由很多的散点顺序连接组成的，这个lineArr就是存储这些散点，而这些散点都是在result中存储的。也就是说

生成路径后，result结果就会返回当前轨迹对象，其中包含了导航信息。

那么就需要在判断体中先根据reult计算lineArr

                        var lineArr = []
                        result.routes[0].steps.forEach(function(item) {
                            lineArr.push(...item.path)
                        });

这样就将result中的结果逐个push到lineArr当中。

 好了，一个简单的入门级的WebGIS课程就到此结束了，后续还可以就更多问题进行深入学习

本课程的参考代码下载链接：

WebGIS入门级教程，适合零基础，智慧校园案例代码，初学者适合。-Javascript文档类资源-CSDN下载