轨迹回放主要是通过marker的moveALong方法,指定marker的移动的路线和速度.
通过监听marker的moving事件,可以获取marker已经走过的路径,通过该路径进行画线,就可以实现图片中路线的绘制
这里面加了 , 动态改变 小车移动速度的函数, 具体可看代码 ,只需要改变speed即可
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>map</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<style>
body,
html,
#container {
margin: 0;
width: 100%;
height: 100%;
}
.input-card .btn {
margin-right: 1.2rem;
width: 9rem;
}
.input-card .btn:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<!-- 地图div -->
<div id="container"></div>
<!-- 右下角 有四个按钮 -->
<div class="input-card">
<h4>轨迹回放控制</h4>
<div class="input-item">
<input type="button" class="btn" value="开始动画" id="start" onclick="startAnimation()" />
<input type="button" class="btn" value="暂停动画" id="pause" onclick="pauseAnimation()" />
</div>
<div class="input-item">
<input type="button" class="btn" value="继续动画" id="resume" onclick="resumeAnimation()" />
<input type="button" class="btn" value="变速动画" id="stop" onclick="changeSpeed()" />
</div>
</div>
</body>
<script>
window._AMapSecurityConfig = {
securityJsCode: "xxxx",
};
</script>
<script language="javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=ccc"></script>
<script language="javascript">
const map = (window.map = new AMap.Map("container", {
center: [116.478935, 39.997761],
zoom: 17,
}));
//动态控制小车移动速度
window.speed = 1
// 小车移动轨迹
var 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],
];
// 这是小汽车
var marker = new AMap.Marker({
map: map,
position: [116.478935, 39.997761],
icon: "https://webapi.amap.com/images/car.png",
//点标记显示位置偏移量，默认值为Pixel(-10,-34)。 因为图片都是矩形的 放到地图上可能位置不太对 通过这个属性 可以调一调位置
offset: new AMap.Pixel(-26, -13),
//是否自动旋转 点标记在使用moveAlong动画时，路径方向若有变化，点标记是否自动调整角度，默认为false。广泛用于自动调节车辆行驶方向。
autoRotation: true,
//点标记的旋转角度，广泛用于改变车辆行驶方向
// 因为图片 可能方向不太对 通过这个旋转一下图片，但是这个不要和autoRotation 混淆了哦， 这个angle是图片刚加载出来之后的旋转角度，autoRotation是在angle基础上进行旋转哦
angle: -90,
});
// 小汽车还未走的路
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
strokeWeight: 6, //线宽
});
// 小汽车已经走过的路线
var passedPolyline = new AMap.Polyline({
map: map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
//监听小车移动事件
marker.on("moving", function (e) {
//passedPath为Marker对象在moveAlong或者moveTo过程中已经走过的路径
//通过passedPath 给passedPolyline 设置path 也就是让他开始画绿色的线
passedPolyline.setPath(e.passedPath);
});
// 可以加个这个方法 这个让屏幕 聚焦在小汽车
map.setFitView();
// 下面是四个按钮
function startAnimation() {
// 第一个参数标识这个标记 移动的路径， 第二个是移动的速度
//第三个参数 是变化曲线函数 可以动态控制 移动速度
marker.moveAlong(lineArr, 200, function (e) {
// e 是 当前小汽车 在路径中的比值
// 路径是由多个坐标组成, e 不是整个路径的比值
// e 是每两个坐标点之间的比值 从0 到 1
// return 返回的值 就是改变小汽车在路径上的比值 ,比如现在走了一半(e为0.5),这时候return 0.8 那小车就会移动到 0.8的位置上,视觉上小车移动速度就变快了,但是不能超过1 超过1 就 跑出路径了
return e * window.speed > 1 ? 1 : e * window.speed
});
}
function pauseAnimation() {
// 这是暂停动画 调用resumeMove 还能继续动
marker.pauseMove();
}
function resumeAnimation() {
// 继续执行的方法
marker.resumeMove();
}
// 改变小汽车移动速度
function changeSpeed() {
marker.pauseMove();
//改变小车移动速度,这里要注意 需要暂停 再继续 不然会有小车倒退的问题出现
window.speed = window.speed === 2 ? 1 : 2
marker.resumeMove();
}
</script>
</html>