第1行: | 第1行: | ||
{{jspopularGL-sidebar}} | {{jspopularGL-sidebar}} | ||
− | <div class="h1-title">自定义视角动画</div><div id="update- | + | <div class="h1-title">自定义视角动画</div><div id="update-time1">更新时间:2020年08月07日</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>简介</span></div></div></div><div class="serve-explain-text"> |
− | <div class="bluetitle"><div class=" | + | |
JSAPI GL支持展示地图的3D动画,您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。 | JSAPI GL支持展示地图的3D动画,您可以自定义从地图上某一地点切换到另一地点的3D过渡动画效果。 | ||
<span style="color:#FF0000;">注意:</span>由于在渲染动画时,数据资源是随着当前方位和坐标的改变而实时加载的,刚开始播放动画时画面可能会卡顿,属于正常现象;此外,为了减少加载数据资源的性能损耗,在播放动画时隐藏了地图上的POI点。 | <span style="color:#FF0000;">注意:</span>由于在渲染动画时,数据资源是随着当前方位和坐标的改变而实时加载的,刚开始播放动画时画面可能会卡顿,属于正常现象;此外,为了减少加载数据资源的性能损耗,在播放动画时隐藏了地图上的POI点。 | ||
− | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl6_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl6_0 DEMO详情]</div></div><div class="bluetitle"><div class=" | + | </div><div class="aloneDemo"><div dir="https://lbs.baidu.com/jsdemo/demo/webgl6_0.htm"></div><div class="top_right">[http://lbs.baidu.com/jsdemo.htm#webgl6_0 DEMO详情]</div></div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>提供的3D动画工具</span></div></div></div><div class="serve-explain-text"> |
ViewAnimation:一个用来展示地图3D动画的类,您可以自定义动画的关键帧实例,并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。 | ViewAnimation:一个用来展示地图3D动画的类,您可以自定义动画的关键帧实例,并自由设置动画延迟开始时间、持续时间以及迭代次数等属性。 | ||
ViewAnimation使用详情请见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a7b0 <u>类参考</u>] | ViewAnimation使用详情请见[http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_webgl_1_0.html#a7b0 <u>类参考</u>] | ||
− | </div><div class="bluetitle"><div class=" | + | </div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>添加自定义关键帧3D动画</span></div></div></div><div class="serve-explain-text">您可以通过map.ViewAnimation声明一个动画实例,将其添加到地图容器中。</div><div class="devguide"><div class="leftborderbg" style="height:180px;"></div><div class="devguideorder"><span>1</span>参考展示地图创建基本地图</div><div class="devguidecenter"><pre class="prettyprint codestyle">var bmap = new BMapGL.Map("allmap"); // 创建Map实例 |
bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 17); // 初始化地图,设置中心点坐标和地图级别 | bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 17); // 初始化地图,设置中心点坐标和地图级别 | ||
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 | bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 |
2022年8月19日 (五) 13:29的最后版本
自定义视角动画
更新时间:2020年08月07日
简介
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('animationend', function(e) { // 监听动画结束事件 console.log('end'); }); animation.addEventListener('animationcancel', function(e) { // 监听动画中途被终止事件 console.log('cancel'); });
5开始播放动画
您可以通过startViewAnimation方法来开始播放自定义关键帧3D动画,该方法接收一个动画实例作为参数。
bmap.startViewAnimation(animation); // 开始播放动画
6强制停止动画
您可以通过clearViewAnimation方法来强制停止动画,该方法接收一个动画实例作为参数。
bmap.cancelViewAnimation(animation); // 强制停止动画