浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
轨迹动画
更新时间:2020年08月07日
简介

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, poyline: 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
设置动画中的缩放级别,默认会根据轨迹情况调整到一个合适的级别

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消