在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

export 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地圖時存在，若不存在則需要在組件中引入文件，否則將報錯