百度地图4 从0开始-EW帮帮网

百度地图ViewAnimation动画★★★

可以通过类似于css3中关键帧动画的方式来实现高性能的百度地图动画，主要用到ViewAnimation类和地图的startViewAnimation启动动画，当然我们也可以给ViewAnimation动画绑定相关动画事件

一、ViewAnimation类格式如下：

其中：

keyFrames:是一个关键帧动画数组，里面的每一帧都是一个对象，通过定义关键帧属性，API会补全关键帧之间过渡的动画过程。每个属性含义如下：

属性	类型	描述
center	Point	地图中心点，默认值为地图当前状态中心点
zoom	Number	地图缩放级别，默认值为地图当前状态缩放级别
tilt	Number	地图倾斜角度，默认值为地图当前状态倾斜角度
heading	Number	地图旋转角度，默认值为地图当前旋转角度
percentage	Number	表示当前关键帧处于动画过程的百分比，取值范围0~1

ViewAnimationOptions 为视角动画的配置，参数如下：

属性	类型	描述
delay	Number	动画开始延迟时间，单位ms，默认0
duration	Number	动画持续时间，单位ms，默认1000
interation	Number \| string	循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1

二、ViewAnimation事件如下：

事件	参数	描述
animationstart	{}	动画开始时触发，如果配置了delay，则在delay后触发
animationiterations	{}	当动画循环大于1次时，上一次结束既下一次开始时触发。最后一次循环结束时不触发
animationend	{}	动画结束时触发，如果动画中途被终止，则不会触发
animationcancel	{}	动画中途被终止时触发

案例一完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(116.403963, 39.915119);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();
    map.setTilt(50);
    map.setHeading(0);
    const keyFrames = [
      {
        center: new BMapGL.Point(116.403963, 39.915119),
        zoom: 21,
        tilt: 50,
        heading: 0,
        percentage: 0,
      },
      {
        center: new BMapGL.Point(116.403963, 39.915119),
        zoom: 21,
        tilt: 50,
        heading: 100,
        percentage: 0.5,
      },
      {
        center: new BMapGL.Point(116.403963, 39.915119),
        zoom: 21,
        tilt: 50,
        heading: 200,
        percentage: 1,
      },
    ];
    const opts = {
      delay: 1000,
      duration: 3000,
      interation: "INFINITE",
    };

    const animation = new BMapGL.ViewAnimation(keyFrames, opts);
    map.startViewAnimation(animation);
  </script>
</html>

案例一效果如下：

案例二代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(116.307092, 40.054922);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();
    map.setTilt(50);
    map.setHeading(0);

    // 定义关键帧
    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,
        personalbar: 1,
      },
    ];
    const opts = {
      delay: 2000,
      duration: 5000,
      interation: 2,
    };

    const animation = new BMapGL.ViewAnimation(keyFrames, opts);
    //  map.startViewAnimation(animation);

    // 监听事件
    animation.addEventListener("animationstart", function (e) {
      console.log("start");
    });
    animation.addEventListener("animationiterations", function (e) {
      console.log("onanimationiterations");
    });
    animation.addEventListener("animationend", function (e) {
      console.log("end");
    });
    // 开始播放动画
    setTimeout("map.startViewAnimation(animation)", 00);
  </script>
</html>

案例二效果如下：

可以通过添加按钮方式手动启动或停止动画

案例三完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .tools {
        position: absolute;
        left: 380px;
        top: 50px;
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div class="tools">
      <button class="play_btn">播放</button>
      <button class="stop_btn">停止</button>
    </div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(116.307092, 40.054922);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();
    map.setTilt(50);
    map.setHeading(0);

    // 定义关键帧
    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,
        personalbar: 1,
      },
    ];
    const opts = {
      delay: 0,
      duration: 5000,
      interation: 2,
    };

    const animation = new BMapGL.ViewAnimation(keyFrames, opts);
    //  map.startViewAnimation(animation);

    // 监听事件
    animation.addEventListener("animationstart", function (e) {
      console.log("start");
    });
    animation.addEventListener("animationiterations", function (e) {
      console.log("onanimationiterations");
    });
    animation.addEventListener("animationend", function (e) {
      console.log("end");
    });
    // 开始播放动画
    //  setTimeout("map.startViewAnimation(animation)", 00);
    document.querySelector(".play_btn").addEventListener("click", function () {
      console.log(111);
      map.startViewAnimation(animation);
    });

    document.querySelector(".stop_btn").addEventListener("click", function () {
      console.log(222);
      map.cancelViewAnimation(animation);
    });
  </script>
</html>

演示效果如下：

4.2.6 百度地图TrackAnimation动画★★★

百度地图本身没有提供轨迹动画，需要引入第三方动画库文件：

https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js

TrackAnimation动画文档如下：

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

构造函数	描述
TrackAnimation(map: Map, poyline: Polyline, options: TrackAnimationOptions)	创建一个新的轨迹3D动画，构造函数需要两个参数：参数1为地图实例，参数2为配置项

构造函数中有三个参数：

1.map:表示地图实例

2.polyline：表示用折线绘制动画

3.TrackAnimationOptions：轨迹动画配置项

具体TrackAnimationOptions配置项如下：

属性	类型	描述
duration	Number	动画持续时常，单位ms
delay	Number	动画开始延迟
overallView	Boolean	是否在动画结束后总览视图缩放（调整地图到能看到整个轨迹的视野），默认开启
tilt	Number	设置动画中的地图倾斜角度，默认55度
zoom	Number	设置动画中的缩放级别，默认会根据轨迹情况调整到一个合适的级别

实例相关方法：

属性	类型	描述
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	设置动画中的缩放级别

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }

      .tools {
        position: absolute;
        left: 380px;
        top: 50px;
        z-index: 10;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <div class="tools">
      <button class="play_btn">播放</button>
      <button class="stop_btn">停止</button>
    </div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(116.328103, 39.900835);
    map.centerAndZoom(point, 17);
    map.enableScrollWheelZoom();
    map.setTilt(50);
    map.setHeading(0);

    const points = [
      new BMapGL.Point(116.328103, 39.900835),
      new BMapGL.Point(116.369545, 39.905355),
      new BMapGL.Point(116.361579, 39.973634),
      new BMapGL.Point(116.38528, 39.976096),
      new BMapGL.Point(116.387816, 39.982833),
      new BMapGL.Point(116.382222, 40.000218),
      new BMapGL.Point(116.22428, 40.240209),
    ];
    const pl = new BMapGL.Polyline(points);
    const opts = {
      overallView: true, // 动画完成后自动调整视野到总览
      tilt: 30, // 轨迹播放的角度，默认为55
      duration: 20000, // 动画持续时长，默认为10000，单位ms
      delay: 3000, // 动画开始的延迟，默认0，单位ms
    };

    const trackAnimation = new BMapGLLib.TrackAnimation(map, pl, opts);
    trackAnimation.start();
  </script>
</html>

完整效果如下：

本文含有隐藏内容，请开通VIP 后查看

百度地图4 从0开始

网站公告

今日签到

热门文章

最新发布