vue.js 百度地图上，路线轨迹的3D动画展示

@[vue.js 百度地图上，路线轨迹的3D动画展示]

百度地图很强大，也为开发者提供很好的开发接口。今天教大家一个3D地图上路线轨迹可视化的小功能。

步骤：

第一步：申请 ak, 很简单。
http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey

第二步：配置。

const ak = '你的ak' // 百度的地图密钥
/**
 * 异步加载百度地图
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuMap() {
  return new Promise(function (resolve, reject) {
    try {
      console.log('BMap is defined:', BMapGL === undefined || BMapGL)
      resolve(BMapGL)
    } catch (err) {
      window.init = function () {
        resolve(BMapGL)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.body.appendChild(script)
    }
  })
}
export { loadBaiDuMap }
/**
 * 异步加载百度地图,以及绘制工具
 * @returns {Promise}
 * @constructor
 */
function loadBaiDuDrawMap() {
  return loadBaiDuMap().then(BMapGL => {
    let loaded = false
    try {
      loaded = (BMapGLLib && BMapGLLib.DrawingManager)
    } catch (err) {
      loaded = false
    }
    if (!loaded) {
      console.log('BMapLib.DrawingManager loading!')
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js'
      document.body.appendChild(script)
      let link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = 'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css'
      document.body.appendChild(link)


      console.log('BMapLib.TrackAnimatio loading!')
      let script1 = document.createElement('script')
      script1.type = 'text/javascript'
      script1.src = '//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js'
      document.body.appendChild(script1)
    } else {
      console.log('BMapLib.DrawingManager is loaded!')
      console.log('BMapLib.TrackAnimatio is loaded!')
    }
    return BMapGL
  })
}
export { loadBaiDuDrawMap }

第三步：引入页面。

<template>
  <!--地图-->
  <div style='width: 100%;height: 700px;'>
    <div id="container"></div>
    <ul class="drawing-panel" style="z-index: 99;">
        <li class = "btn" @click="pauseAni">暂停</li>
        <li class = "btn"  @click="continueAni">继续</li>
    </ul>
  </div>
</template>
 <script type='text/javascript' src='http://api.map.baidu.com/api?v=3.0&ak=你的ak'></script>
<script>
  import {loadBaiDuDrawMap} from "@/utils/bmpgl.js"
  
  export default {
    name: 'index',
    data () {
      return {
        path : [{
            'lng': 112.541993,
            'lat': 37.822504
          }, {
              'lng': 112.628662,
              'lat': 38.02281
          }, {
              'lng': 112.70708,
              'lat': 38.023748
          }, {
              'lng': 113.009629,
              'lat': 38.060038
          }, {
              'lng': 113.352889,
              'lat': 38.09286
          }, {
              'lng': 113.71081,
              'lat': 38.060209
          }, {
              'lng': 113.897227,
              'lat': 38.072481
          }, {
              'lng': 114.028882,
              'lat': 38.121267
          }, {
              'lng': 114.24771,
              'lat': 38.194384
          }, {
              'lng': 114.472825,
              'lat': 38.092136
          }, {
              'lng': 114.581917,
              'lat': 38.061173
          }],
        interval: null, // 定时器
        timesRun: 0, // 循环次数
        localSearch: null,  // 自动搜索
        loading: false,
        transportmanageList: [],
        trackAni: null,
        maps:'', // 存放地图
        pls:''
      }
    },
    mounted () {
       this.init() // 初始化轨迹路线
    },
    created () {},
    methods: {
      init () {
        // 初始化地图
        loadBaiDuDrawMap().then((BMapGL) => {
          let that = this
          // 创建地图实例
          let bmap = new BMapGL.Map("container")
          bmap.centerAndZoom(new BMapGL.Point(116.404, 39.915), 14) // 初始化地图,设置中心点坐标和地图级别
          bmap.enableScrollWheelZoom(true)  //开启鼠标滚轮缩放

          // 添加比例尺控件
          bmap.addControl(
            new BMapGL.ScaleControl({
              anchor: BMAP_ANCHOR_BOTTOM_LEFT,
              offset: new BMapGL.Size(10, 10)
            })
          )
          // 添加缩放控件
          bmap.addControl(
            new BMapGL.ZoomControl({
              anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
              offset: new BMapGL.Size(10, 10)
            })
          )

          let point = []
          for (var i = 0; i < this.path.length; i++) {
            let poi = new BMapGL.Point(this.path[i].lng, this.path[i].lat)
            point.push(poi)
            let marker = new BMapGL.Marker(poi); //创建标注
            bmap.addOverlay(marker); //将标注添加到地图中
          }
          let pl = new BMapGL.Polyline(point,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5})
          // 保存地图
          this.maps = bmap
          this.pls = pl

          setTimeout(this.start(), 3000)
          bmap.setHeading(64.5)
          bmap.setTilt(73)
        })
      },
      // 创建个轨迹动画对象，并配置参数
      start (){
        this.trackAni = new BMapGLLib.TrackAnimation(this.maps, this.pls, {
          overallView: true, // 动画完成后自动调整视野到总览
          tilt: 30,          // 轨迹播放的角度，默认为55
          duration: 20000,   // 动画持续时长，默认为10000，单位ms
          delay: 3000        // 动画开始的延迟，默认0，单位ms

        })
        this.trackAni.start ()
      },
      pauseAni () {
         this.trackAni.pause()
      },
      continueAni () {
          this.trackAni.continue()
      }
    }
  }
</script>
<style scoped>
 
  #result {
    position: fixed;
    top: 10px;
    left: 20px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    border-radius: 7px;
    z-index: 99;
  }

   #container {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
    }
    ul li {
        list-style: none;
    }
    .drawing-panel {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 3rem;
        padding: 1rem 1rem;
        border-radius: .25rem;
        background-color: #fff;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }
    .btn {
        width: 90px;
        height: 30px;
        float: left;
        background-color: #fff;
        color: rgba(27, 142, 236, 1);
        font-size: 14px;
        border:1px solid rgba(27, 142, 236, 1);
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 30px;
    }
    .btn:hover {

        color: #fff;
    }
</style>

效果展示