AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
轨迹动画
简介

JSAPI GL在视角动画的基础上,封装了轨迹动画开源库,可以实现在轨迹动态播放的同时,视角跟随移动。
注意:由于在渲染动画时,数据资源是随着当前方位和坐标的改变而实时加载的,刚开始播放动画时画面可能会卡顿,属于正常现象;此外,为了减少加载数据资源的性能损耗,在播放动画时隐藏了地图上的POI点。

添加轨迹动画

您可以通过map.ViewAnimation声明一个动画实例,将其添加到地图容器中。

1. 引入开源库文件

轨迹动画依赖开源库BMapGLLib.TrackAnimation,因此需要在引入JSAPI GL版的基础上,在页面当中引用轨迹动画开源库静态JS文件。JSAPI 开源库是运行在JSAPI基础上的静态库,其提供了一些开发者常用的非核心功能,代码开源,开发者可以根据自己的需求下载、二次开发使用。

<script type="text/javascript" src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的AK"></script>
<script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
2. 创建基本地图
var bmap = new BMapGL.Map("allmap"); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
3. 自定义一个折线轨迹

声明一个Polyline对象,不需要调用Map.addOverlay()添加到地图中,创建对象即可。

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);
4. 创建一个轨迹动画对象,并配置参数

轨迹动画的构造参数接受3个参数。参数1为当前地图对象;参数2为折线对象;参数3为配置对象,详情可以参考下文的类参考。

var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
overallView: true, // 动画完成后自动调整视野到总览
tilt: 30, // 轨迹播放的角度,默认为55
duration: 20000, // 动画持续时长,默认为10000,单位ms
delay: 3000 // 动画开始的延迟,默认0,单位ms
});
5. 启动动画

为了保证效果,建议地图渲染完成后,再由其他方式触发动画播放。

trackAni.start();
6. 强制停止动画

动画播放过程中,可以调用方法停止取消。

trackAni.cancel(); // 强制停止动画
类参考

命名空间:BMapGLLib。
类:TrackAnimation
描述:此类是轨迹3D动画类,用于初始化一个轨迹3D动画。

构造函数描述

TrackAnimation(map: Map, polyline: Polyline, options: TrackAnimationOptions)

创建一个新的轨迹3D动画,构造函数需要两个参数:参数1为地图实例,参数2为配置项

属性类型描述

start()

none

开始动画

cancel()

none

终止动画

setPolyline(polyline: Polyline)

none

设置动画轨迹折线覆盖物

getPolyline()

Polyline

获取动画轨迹折线覆盖物

setDelay(delay: Number)

none

动画开始延迟,单位ms

getDelay()

Number

获取动画开始延迟,单位ms

setDuration(duration: Number)

none

设置动画持续时间。建议根据轨迹长度调整,地图在轨迹播放过程中动态渲染,动画持续时间太短影响地图渲染效果。

getDuration()

Number

获取动画持续时间

enableOverallView()

none

开启动画结束后总览视图缩放(调整地图到能看到整个轨迹的视野),默认开启

disableOverallView()

none

关闭动画结束后总览视图缩放(调整地图到能看到整个轨迹的视野),默认关闭

setTilt(tilt: Number)

none

设置动画中的地图倾斜角度,默认55度

getTilt()

Number

获取动画中的地图倾斜角度

setZoom(zoom: Number)

none

设置动画中的缩放级别,默认会根据轨迹情况调整到一个合适的级别

getZoom()

Number

设置动画中的缩放级别

类:TrackAnimationOptions
描述:轨迹动画配置,不可实例化

属性类型描述

duration

Number

动画持续时长,单位ms

delay

Number

动画开始延迟

overallView

Boolean

是否在动画结束后总览视图缩放(调整地图到能看到整个轨迹的视野),默认开启

tilt

Number

设置动画中的地图倾斜角度,默认55度

zoom

Number

设置动画中的缩放级别,默认会根据轨迹情况调整到一个合适的级别

上一篇

自定义视角动画

下一篇

正/逆地址解析
本篇文章对您是否有帮助?