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

文档全面上新

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

体验新版
简介

JSAPI GL支持展示地图的3D动画,您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。

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

提供的3D动画工具

ViewAnimation:一个用来展示地图3D动画的类,您可以自定义动画的关键帧实例,并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。

ViewAnimation使用详情请见类参考

添加自定义关键帧3D动画
您可以通过map.ViewAnimation声明一个动画实例,将其添加到地图容器中。
1参考展示地图创建基本地图
var bmap = new BMapGL.Map("allmap");                          // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 17);    // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true);                             // 开启鼠标滚轮缩放
bmap.setTilt(20);                              // 设置地图初始倾斜角度
2自定义关键帧

如下示例,定义了关键帧,关键帧以一个对象数组的形式定义,每一个关键帧作为该数组的一个对象成员,以对象字面量的形式传入。

注意:由于在渲染动画时,数据资源是随着当前方位和坐标的改变而实时加载的,在定义关键帧时相邻两个关键帧的坐标点不宜距离太远,否则会导致当前帧的资源还未加载完毕,就已经进入下一帧的播放,出现视野中看不到地图的现象。

var keyFrames = [
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第一个关键帧帧地图中心点
        zoom: 18,                                      // 定义第一个关键帧地图等级
        tilt: 60,                                      // 定义第一个关键帧地图倾斜角度
        heading: 0,                                    // 定义第一个关键帧地图旋转方向
        percentage: 0                                  // 定义第一个关键帧处于动画过程的百分比,取值范围0~1
    },
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第二个关键帧地图中心点
        zoom: 18,                                      // 定义第二个关键帧地图等级
        tilt: 60,                                      // 定义第二个关键帧地图倾斜角度
        heading: 180,                                  // 定义第二个关键帧地图旋转方向
        percentage: 0.5                                // 定义第二个关键帧处于动画过程的百分比,取值范围0~1
    },
    {
        center: new BMapGL.Point(1116.414,39.915),     // 定义第三个关键帧地图中心点
        zoom: 18,                                      // 定义第三个关键帧地图等级
        tilt: 60,                                      // 定义第三个关键帧地图倾斜角度
        heading: 360,                                  // 定义第三个关键帧地图旋转方向
        percentage: 1                                  // 定义第三个关键帧处于动画过程的百分比,取值范围0~1
    }
] ;
3设置动画属性

如下示例,设置了动画属性,动画属性以一个对象的形式定义,每一种属性对应该对象的一个属性。

var opts = {
    duration: 10000,     // 设置每次迭代动画持续时间
    delay: 3000,         // 设置动画延迟开始时间
    interation: 2        // 设置动画迭代次数
};
4监听动画事件
JSAPI支持监听自定义关键帧3D动画的事件,您可以监听到自定义动画的开始事件、迭代事件、结束事件以及中途终止事件。
var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
    console.log('start');
});
animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
    console.log('onanimationiterations');
});
animation.addEventListener('animationstart', function(e) {        // 监听动画结束事件
    console.log('end');
});
animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
    console.log('cancel');
});
5开始播放动画
您可以通过startViewAnimation方法来开始播放自定义关键帧3D动画,该方法接收一个动画实例作为参数。
bmap.startViewAnimation(animation);         // 开始播放动画
6强制停止动画
您可以通过clearViewAnimation方法来强制停止动画,该方法接收一个动画实例作为参数。
bmap.cancelViewAnimation(animation);         // 强制停止动画
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消