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>