1. ViewAnimation帧动画开发

<body><div id="map"></div><script>// 地图对象初始化let map = new BMapGL.Map('map');// 地图中心坐标 - 后续地图绘制都需要这种坐标// 百度有坐标拾取器，可以获取地点的坐标let point = new BMapGL.Point(116.404, 39.915);// 可以展示地图了,第二个参数zoommap.centerAndZoom(point, 20);// 允许鼠标滚轮滚动放大缩小map.enableScrollWheelZoom(true);map.setTilt(50);map.setHeading(0);// view-animation动画配置// 通过heading变化进行旋转// 通过center变化进行位移...var keyFrames = [{center: new BMapGL.Point(116.307092, 40.054922),zoom: 20,tilt: 50,heading: 0,percentage: 0},{center: new BMapGL.Point(116.307631, 40.055391),zoom: 21,tilt: 70,heading: 0,percentage: 0.1},{center: new BMapGL.Point(116.306858, 40.057887),zoom: 21,tilt: 70,heading: 0,percentage: 0.25},{center: new BMapGL.Point(116.306858, 40.057887),zoom: 21,tilt: 70,heading: -90,percentage: 0.35},{center: new BMapGL.Point(116.307904, 40.058118),zoom: 21,tilt: 70,heading: -90,percentage: 0.45},{center: new BMapGL.Point(116.307904, 40.058118),zoom: 21,tilt: 70,heading: -180,percentage: 0.55},{center: new BMapGL.Point(116.308902, 40.055954),zoom: 21,tilt: 70,heading: -180,percentage: 0.75},{center: new BMapGL.Point(116.308902, 40.055954),zoom: 21,tilt: 70,heading: -270,percentage: 0.85},{center: new BMapGL.Point(116.307779, 40.055754),zoom: 21,tilt: 70,heading: -360,percentage: 0.95},{center: new BMapGL.Point(116.307092, 40.054922),zoom: 20,tilt: 50,heading: -360,percentage: 1},];var opts = {duration: 10000,delay: 5000,interation: 'INFINITE'};let animation = new BMapGL.ViewAnimation(keyFrames, opts);map.startViewAnimation(animation);</script></body>

简单来说是通过定义多个关键帧来完成动画，过渡有百度地图完成

可以用于地图某个区域的旋转展示等等功能。

接着我们看看这个事件有哪些：

// 监听事件animation.addEventListener('animationstart', function(e){console.log('start')});animation.addEventListener('animationiterations', function(e){console.log('onanimationiterations')});animation.addEventListener('animationend', function(e){console.log('end')});

这里如果你想要通过自定义的按钮来控制动画开始，需要注意map是有z-index的，需要保证你的button区域的z-index > 9才行。然后在button的click事件调用map.startViewAnimation方法来开启动画

2. TrackAnimation轨迹动画

主要用于标注A点到B点的过程，展示路径和过程。

这个官方文档还没更新，直接演示吧：

<body><div id="map"></div><script>// 地图对象初始化let map = new BMapGL.Map('map');// 地图中心坐标 - 后续地图绘制都需要这种坐标// 百度有坐标拾取器，可以获取地点的坐标let point = new BMapGL.Point(116.404, 39.915);// 可以展示地图了,第二个参数zoommap.centerAndZoom(point, 15);// 允许鼠标滚轮滚动放大缩小map.enableScrollWheelZoom(true);map.setHeading(0);// track动画再另外一个库里面// 通过点绘制线，然后放入track动画里面// 点可以是地图上目标点的坐标(通过官网的坐标拾取器可以获得)const points = [new BMapGL.Point(116.418038,39.91979),new BMapGL.Point(116.418038,40.0592479),new BMapGL.Point(116.307899,40.057038),];const lines = new BMapGL.Polyline(points);const opts = {delay: 1000,duration: 20000,titl: 30, // 动画播放时俯角overallView: true // 动画结束会自动调整视角};const trackAnimation = new BMapGLLib.TrackAnimation(map, lines, opts);trackAnimation.start();</script></body>

如果要做细需要花时间精确获取每个沿路点的坐标

https://lbsyun.baidu.com/jsdemo.htm#webgl6_1

百度地图开发入门（3）：动画相关推荐

Android百度地图开发入门教程
Android百度地图开发入门教程 1.平台注册登录 2.创建应用 3.Android studio配置 4.代码编写 5.最终效果(建议真机) 1.平台注册登录登录百度地图开放平台网站注册并登录 ...
百度地图开发入门（5）：飞线动画示例
原创不易~看完若对你有所帮助,记得点一个赞哈,这就是对我最大的支持了! 讲解另一种常见应用-飞线动画,主要用于展示数据流向 https://lbsyun.baidu.com/solutions/map ...
百度地图开发入门（1）：案例
将我之前的百度地图入门的一些博文分享一下,这里主要系统讲解地图可视化的开发方式 1. 百度开发者账户申请具体可以参考这里:https://lbsyun.baidu.com/index.php?tit ...
IOS开发百度地图API入门到精通－用点生成路线，导航，气泡响应
(转)IOS开发百度地图API入门到精通-用点生成路线,导航,气泡响应 IOS百度地图API开发自定义气泡,点击气泡自动生成路线,以及拖拽 IOS百度地图开发POISearch搜索附近停车场,附近加油 ...
新手入门百度地图开发的（0,0）坐标问题
对于大部分人来讲,由于百度地图资料众多,过度依赖搜索引擎等等原因.新接触百度地图开发工作其实并不容易.今天说说关于坐标(0,0)的问题. 首先仍然介绍坐标系,我们先不管采用的和wgs84还是gcj02 ...
[android] 百度地图开发 (二).定位城市位置和城市POI搜索
一. 百度地图城市定位和POI搜索知识上一篇文章"百度地图开发(一)"中讲述了如何申请百度APIKey及解决显示空白网格的问题.该篇文章主要讲述如何定位城市位置.定位 ...
Android 百度地图开发（三）--- 实现比例尺功能和替换自带的缩放组件
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/11821523 貌似有些天没有写博客了,前段时间在忙找工作的事,面试了几家公司,表示反响 ...
Android 百度地图开发（二）
前面我们一起了解了百度地图的申请与集成Android 百度地图开发(一),今天我们接着来学习百度地图. 今天主要来了解如下问题: 1.百度地图的生命周期控制上一篇张我们已经在布局文件里增加了mapV ...
百度地图开发技术方案及解决办法
技术方案及解决办法文章目录技术方案及解决办法总体方案基础框架前端网页后端程序结合搭建方法跨域解决 python处理excel 问题描述解决办法网页结构 vue实例内容引入 ele ...

百度地图开发入门（3）：动画

1. ViewAnimation帧动画开发

2. TrackAnimation轨迹动画

百度地图开发入门（3）：动画相关推荐

最新文章

热门文章