一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。 百度地图提供了一些API来提供动画的开发
1. ViewAnimation帧动画开发
<body>
<div id="map"></div>
<script>
// 地图对象初始化
let map = new BMapGL.Map('map');
// 地图中心坐标 - 后续地图绘制都需要这种坐标
// 百度有坐标拾取器，可以获取地点的坐标
let point = new BMapGL.Point(116.404, 39.915);
// 可以展示地图了,第二个参数zoom
map.centerAndZoom(point, 20);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
map.setTilt(50);
map.setHeading(0);
// view-animation动画配置
// 通过heading变化进行旋转
// 通过center变化进行位移...
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: 5000,
interation: 'INFINITE'
};
let animation = new BMapGL.ViewAnimation(keyFrames, opts);
map.startViewAnimation(animation);
</script>
</body>
简单来说是通过定义多个关键帧来完成动画，过渡有百度地图完成
可以用于地图某个区域的旋转展示等等功能。
接着我们看看这个事件有哪些：
// 监听事件
animation.addEventListener('animationstart', function(e){console.log('start')});
animation.addEventListener('animationiterations', function(e){console.log('onanimationiterations')});
animation.addEventListener('animationend', function(e){console.log('end')});
这里如果你想要通过自定义的按钮来控制动画开始，需要注意map是有z-index的，需要保证你的button区域的z-index > 9才行。然后在button的click事件调用map.startViewAnimation方法来开启动画
2. TrackAnimation轨迹动画
主要用于标注A点到B点的过程，展示路径和过程。
这个官方文档还没更新，直接演示吧：
<body>
<div id="map"></div>
<script>
// 地图对象初始化
let map = new BMapGL.Map('map');
// 地图中心坐标 - 后续地图绘制都需要这种坐标
// 百度有坐标拾取器，可以获取地点的坐标
let point = new BMapGL.Point(116.404, 39.915);
// 可以展示地图了,第二个参数zoom
map.centerAndZoom(point, 15);
// 允许鼠标滚轮滚动放大缩小
map.enableScrollWheelZoom(true);
map.setHeading(0);
// track动画再另外一个库里面
// 通过点绘制线，然后放入track动画里面
// 点可以是地图上目标点的坐标(通过官网的坐标拾取器可以获得)
const points = [
new BMapGL.Point(116.418038,39.91979),
new BMapGL.Point(116.418038,40.0592479),
new BMapGL.Point(116.307899,40.057038),
];
const lines = new BMapGL.Polyline(points);
const opts = {
delay: 1000,
duration: 20000,
titl: 30, // 动画播放时俯角
overallView: true // 动画结束会自动调整视角
};
const trackAnimation = new BMapGLLib.TrackAnimation(map, lines, opts);
trackAnimation.start();
</script>
</body>
如果要做细需要花时间精确获取每个沿路点的坐标
