WebGIS开发【智慧校园】实战案例：21. 项目实战（四）
发布时间
阅读量：
阅读量
最后我们来谈⼀下动画的实现
动画实际可以理解为对轨迹的模拟，当路径成功生成后，激发对路径的模拟，这里用判断语句来实 现这个逻辑：
driving.search(start,end,opts,function(status, result){
if(status=='complete'){
// 实现轨迹的模拟
}else{
}
})
javascript
先做⼀个小车的标记
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,
})
javascript
这个小车规定了可以自动旋转，起始位置，并显示在地图上。
之后，就创建⼀个折线对象，用来显示车行驶需要走的路。
var passedPolyline = new AMap.Polyline({
map:map,
strokeColor:'#AF5',//描边的绿⾊
strokeWeight:6,//线宽
})
marker.on('moving',function(e){
passedPolyline.setPath(e.passedPath)
})
javascript
⾸先定义路径的属性，之后给marker的移动事件赋予回调函数，也就是给折线定义具体的路径。 之后，还需要给marker的移动进行设置。
map.setFitView()
marker.moveAlong(lineArr,{
duration:500,
autoRotation: true,
})
javascript
先调整地图的显示范围，然后规定在车移动时，每个0.5s就⼀定⼀次，且开启自动旋转。
这里有⼀个量还需要预定⼀下，就是lineArr。
之前在规划路径是，路其实是由很多的散点顺序连接组成的，这个 lineArr就是存储这些散点，而这些散点都是在result中存储的。
也就是说生成路径后，result结果就会返回当前轨迹对象，其中包含了导航信息。
那么就需要在判断体中先根据reult计算lineArr
var lineArr = []
result.routes[0].steps.forEach(function(item) {
lineArr.push(...item.path)
});
javascript
这样就将result中的结果逐个push到lineArr当中。
全部评论 (0)
还没有任何评论哟~