vuemap/vue-amap基于 vue-amap 升级的地图组件

vuemap/vue-amap 是一套基于 Vue和高德地图的地图组件，当前支持vue2和vue3。
该版本对原 vue-amap 组件进行升级，主要适配 amap2.0 相关的接口，同时调整事件绑定形式，调整为使用 v-on 进行事件绑定。
组件中对高德可视化组件 loca 进行封装，同时提供基础的 ThreeJS 能力，可以正常加载 GLTF 模型，获取模型对象进行细节控制。
该项目基于 https://github.com/ElemeFE/vue-amap/ 进行二次开发

快速上手

// 引入vue-amap
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
});

//如果需要使用自定义的threeJS相关的组件，需要格外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);

示例

<template>
    <div class="amap-page-container">
      <el-amap ref="map" map-style="amap://styles/62009be025f187dd3eafe327d2e55b8e" :center="center" :zoom="zoom" view-mode="3D" @init="initMap" @click="clickMap" class="amap-demo">
      </el-amap>

      <div class="toolbar">
        <button @click="getMap()">获取map实例</button>
      </div>
    </div>
  </template>

  <style>
    .amap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          zoom: 12,
          center: [121.59996, 31.197646],
        };
      },

      methods: {
        getMap() {
          console.log(this.$refs.map.$$getInstance());
        },
        clickMap(e){
          console.log('click map :', e );
        },
        initMap(e){
          console.log('init map: ', e);
        }
      }
    };
  </script>