三维轨迹动画

应用场景

三维轨迹动画功能适用于展示交通工具、物流运输、旅行路线等具有空间移动属性的数据，通过三维动画的形式直观地呈现运动轨迹，增强用户体验。

基本功能

该代码实现的三维轨迹动画功能包括：

• 从指定起点沿着既定路径运动到终点
• 可自定义运动速度、视角倾斜度、俯视角度等动画效果
• 提供轨迹回放、暂停、继续等控制选项

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

1. 加载必备脚本和样式

async mounted() {
  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版必备脚本和样式，包括地图API、WebGL支持、第三方插件等。

2. 创建地图实例并初始化

var bmap = new BMapGL.Map('allmap') // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17) // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

创建地图实例并进行初始化，设置中心点坐标和地图缩放级别，开启鼠标滚轮缩放功能。

3. 定义轨迹路径

var path = [
  {
    lng: 116.297611,
    lat: 40.047363,
  },
  {
    lng: 116.302839,
    lat: 40.048219,
  },
  // ...
]

定义轨迹路径，包含一系列经纬度坐标点。

4. 创建轨迹动画实例

trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
  overallView: true,
  tilt: 30,
  duration: 20000,
  delay: 300,
})

创建轨迹动画实例，指定地图实例、轨迹路径、以及动画效果参数，包括是否显示整体概览、视角倾斜度、动画持续时间、延迟时间等。

5. 启动动画

trackAni.start()

调用轨迹动画实例的start()方法，启动动画。

总结与展望

开发经验与收获

• 掌握了百度地图GL版开发技术，了解了轨迹动画插件的使用。
• 提高了对三维空间数据可视化的理解和应用能力。

未来展望

• 优化动画效果，增强视觉体验。
• 拓展轨迹动画功能，支持自定义轨迹、交互控制等。
• 与其他数据分析或可视化工具集成，提升数据利用价值。