百度地图动画及轨迹动画

一、百度地图动画

1
2
3
4
5
<div id="allmap"></div>
<div id="tools">
  <button id="start">播放动画</button>
  <button id="end">停止播放</button>
</div>
点我展开js代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 20); // 初始化地图，设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
bmap.setTilt(20); // 设置地图初始倾斜角度
var keyFrames = [
  {
    center: new BMapGL.Point(116.307092, 40.054922),
    zoom: 20,
    tilt: 50,
    heading: 0,
    percentage: 0,
  },
  {
    center: new BMapGL.Point(116.307631, 40.055391),
    zoom: 21,
    tilt: 70,
    heading: 0,
    percentage: 0.1,
  },
  {
    center: new BMapGL.Point(116.306858, 40.057887),
    zoom: 21,
    tilt: 70,
    heading: 0,
    percentage: 0.25,
  },
  {
    center: new BMapGL.Point(116.306858, 40.057887),
    zoom: 21,
    tilt: 70,
    heading: -90,
    percentage: 0.35,
  },
  {
    center: new BMapGL.Point(116.307904, 40.058118),
    zoom: 21,
    tilt: 70,
    heading: -90,
    percentage: 0.45,
  },
  {
    center: new BMapGL.Point(116.307904, 40.058118),
    zoom: 21,
    tilt: 70,
    heading: -180,
    percentage: 0.55,
  },
  {
    center: new BMapGL.Point(116.308902, 40.055954),
    zoom: 21,
    tilt: 70,
    heading: -180,
    percentage: 0.75,
  },
  {
    center: new BMapGL.Point(116.308902, 40.055954),
    zoom: 21,
    tilt: 70,
    heading: -270,
    percentage: 0.85,
  },
  {
    center: new BMapGL.Point(116.307779, 40.055754),
    zoom: 21,
    tilt: 70,
    heading: -360,
    percentage: 0.95,
  },
  {
    center: new BMapGL.Point(116.307092, 40.054922),
    zoom: 20,
    tilt: 50,
    heading: -360,
    percentage: 1,
  },
];
var opts = {
  duration: 10000, // 设置每次迭代动画持续时间
  delay: 3000, // 设置动画延迟开始时间
  interation: "INFINITE", // 设置动画迭代次数
};
var animation = new BMapGL.ViewAnimation(keyFrames, opts); // 初始化动画实例
animation.addEventListener("animationstart", function (e) {
  // 监听动画开始事件
  console.log("start");
});
animation.addEventListener("animationiterations", function (e) {
  // 监听动画迭代事件
  console.log("onanimationiterations");
});
animation.addEventListener("animationend", function (e) {
  // 监听动画结束事件
  console.log("end");
});
animation.addEventListener("animationcancel", function (e) {
  // 监听动画中途被终止事件
  console.log("cancel");
});
document.getElementById("start").addEventListener("click", function () {
  bmap.startViewAnimation(animation); // 开始播放动画
});
document.getElementById("end").addEventListener("click", function () {
  bmap.cancelViewAnimation(animation); // 强制停止动画
});

二、百度地图轨迹动画

1
2
3
4
<scrip
  type="text/javascript"
  src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"
></scrip>
1
2
3
4
5
<div id="allmap"></div>
<div id="tools">
  <button id="start">播放动画</button>
  <button id="end">停止播放</button>
</div>
点我展开js代码 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图，设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var path = [
  {
    lng: 116.297611,
    lat: 40.047363,
  },
  {
    lng: 116.302839,
    lat: 40.048219,
  },
  {
    lng: 116.308301,
    lat: 40.050566,
  },
  {
    lng: 116.305732,
    lat: 40.054957,
  },
  {
    lng: 116.304754,
    lat: 40.057953,
  },
  {
    lng: 116.306487,
    lat: 40.058312,
  },
  {
    lng: 116.307223,
    lat: 40.056379,
  },
];
var point = [];
for (var i = 0; i < path.length; i++) {
  point.push(new BMapGL.Point(path[i].lng, path[i].lat));
}
var pl = new BMapGL.Polyline(point);
var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
  overallView: true, // 动画完成后自动调整视野到总览
  tilt: 30, // 轨迹播放的角度，默认为55
  duration: 20000, // 动画持续时长，默认为10000，单位ms
  delay: 3000, // 动画开始的延迟，默认0，单位ms
});
document.getElementById("start").addEventListener("click", function () {
  trackAni.start();
});
document.getElementById("end").addEventListener("click", function () {
  trackAni.cancel(); // 强制停止动画
});