在vue项目中使用bigemap的模拟迁徙功能

查看bigemap的示例代码（http://www.bigemap.com/offlinemaps/demo/echarts_geolines.html）

下载bigemap的地图

下载echarts依赖包

在vue项目中使用方法如下：（关键代码，剩下的设置echarts线条动画参照bigemap的模拟迁徙代码）

<template>
  <DataComWrapper
    title="地图数据"
  >
<!-- 设置地图容器 -->
    <div id="map" class="data-screen-map">
      loading...
    </div>
    <!-- <Map /> -->

  </DataComWrapper>
</template>

<script>

import { getInstance, init as initBM } from '../utils/bigemap-helper.js' //引入地图
import DataComWrapper from '../components/common/DataComWrapper' //引入公共组件
import echarts from 'echarts' //引入echarts

ecport default {
    name:'Map',
    components:{DataComWrapper},
    props:['data','info'],
    data(){
        return {}
    },
    computed: {
        deviceList() {
          // console.log('data:',this.data)
          return this.data
        },
        configInfo() {
          // console.log('info:',this.info)
          return this.info
        },
    },
     mounted() {
        this.init()
      },
    methods:{
         async init() {
              try {
                await initBM()
                this.map = getInstance()
              } catch (e) {
                // console.error(e)
              }
              window.echarts = echarts //拿到echarts
              const script = document.createElement('script') //创建一个script标签，引入public的js文件
              script.src = 'http://www.bigemap.com/Public/offline/iclient/js/iclient9.min.js'
              document.body.appendChild(script)
            //判断当条件都成立时，才显示；否则重新执行这个方法知道条件成立
              if (window.BM && window.BM.supermap && window.BM.supermap.echartsLayer) {
                await this.initDeviceInfo()
              } else {
                this.init()
              }
        },
    }
}

</script>        

若没有在vue项目中引进"http://www.bigemap.com/Public/offline/iclient/js/iclient9.min.js"文件，会报错，所以若在使用bigemap地图需要做类似的功能时，需要检查bigemap示例代码中引入的文件是否在下载bigemap地图时存在，若不存在则需要在组件中引入文件，否则将报错