vue2 vue-amap plugin ControlBar插件使用和高德3D效果

网络上有不少vue-amap的插件使用教程，我看了许多都没有适用的

要高德3D效果必须用到ControlBar插件
核心是viewMode的开启和ControlBar插件的配置

以下是我试出来的使用方法

在main.js中配置全局vue-amap

import Vue from 'vue'
import VueAMap from 'vue-amap' // 引入vue-amap
// 使用vue-amap
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  // 高德的key
  key: '去高德官网申请',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'AMap.Geolocation'],
  v: '1.4.4'
})

下面代码可以直接复制使用

<template>
   <div style="width: 600px;height: 600px">
     <el-amap :zoom="zoom" :center="center" :viewMode="viewMode" :events="events">
     </el-amap>
   </div>
</template>
<script>
export default {
  data() {
    return {
      zoom: 17,
      center: [113.38345, 34.78759],
      viewMode: '3D', // 开启3D视图,默认为关闭
      events: {
        init(o) {
          o.plugin(['AMap.ControlBar'], () => { // ControlBar插件，文档：https://lbs.amap.com/api/javascript-api/guide/abc/plugins
            const ControlBar = new AMap.ControlBar({ 
              position:{ top:'60px', right:'10px' }
            })
            o.addControl(ControlBar)
          })
        }
      }
    }
  }
}
</script>

运行后的效果截图