基于百度地图GL实现3D环绕视角动画

应用场景

该代码可用于创建基于百度地图GL的3D环绕视角动画，适用于展示建筑物、城市街景等需要多角度展示的场景。

基本功能

此代码使用百度地图GL的ViewAnimation功能，通过设置关键帧，实现地图视角沿指定路径平滑移动，并可设置倾斜角、视角等参数。

功能实现步骤及关键代码分析

1. 加载必要资源

await Promise.all([
  this.loadScripts([
    'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
    'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
  ]),
  this.loadStyles([
    'http://api.map.baidu.com/res/webgl/10/bmap.css',
    'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
  ]),
])

首先，加载百度地图GL所需的脚本和样式文件。

2. 创建地图实例

var bmap = new BMapGL.Map('allmap') // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.307092, 40.054922), 20) // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
bmap.setTilt(50) // 设置地图初始倾斜角

创建百度地图GL地图实例，设置中心点、缩放级别、开启鼠标滚轮缩放并设置初始倾斜角。

3. 定义关键帧

var keyFrames = [
  // 省略部分关键帧
]

定义关键帧，包括中心点、缩放级别、倾斜角、视角和时间百分比。

4. 创建动画对象

var opts = {
  duration: 10000,
  delay: 5000,
  interation: 'INFINITE',
}
var animation = new BMapGL.ViewAnimation(keyFrames, opts)

创建ViewAnimation对象，设置动画持续时间、延迟时间和循环次数。

5. 监听事件

animation.addEventListener('animationstart', function (e) {
  console.log('start')
})
animation.addEventListener('animationiterations', function (e) {
  console.log('onanimationiterations')
})
animation.addEventListener('animationend', function (e) {
  console.log('end')
})

监听动画开始、迭代和结束事件。

6. 开始播放动画

setTimeout('bmap.startViewAnimation(animation)', 00)

延时播放动画，确保地图加载完成后再播放。

总结与展望

通过本代码，可以实现基于百度地图GL的3D环绕视角动画。在开发过程中，深入了解了ViewAnimation功能，以及关键帧的设置方法。

未来，该功能可以进一步拓展，例如：

• 添加标记或信息窗口，提供更多信息；
• 结合其他百度地图GL组件，实现更丰富的交互效果；
• 优化动画性能，提高流畅度。