百度地图开发入门（3）：动画_Joern-Lee_百度地图轨迹动画

未知 02-07 4662

原创不易~看完若对你有所帮助，记得点一个赞哈，这就是对我最大的支持了！

百度地图提供了一些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>

如果要做细需要花时间精确获取每个沿路点的坐标

https://lbsyun.baidu.com/jsdemo.htm#webgl6_1