vuemap/vue-amap基于 vue-amap 升級(jí)的地圖組件

vuemap/vue-amap 是一套基于 Vue和高德地圖的地圖組件，當(dāng)前支持vue2和vue3。
該版本對(duì)原 vue-amap 組件進(jìn)行升級(jí)，主要適配 amap2.0 相關(guān)的接口，同時(shí)調(diào)整事件綁定形式，調(diào)整為使用 v-on 進(jìn)行事件綁定。
組件中對(duì)高德可視化組件 loca 進(jìn)行封裝，同時(shí)提供基礎(chǔ)的 ThreeJS 能力，可以正常加載 GLTF 模型，獲取模型對(duì)象進(jìn)行細(xì)節(jié)控制。
該項(xiàng)目基于 https://github.com/ElemeFE/vue-amap/ 進(jìn)行二次開發(fā)

快速上手

// 引入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相關(guān)的組件，需要格外引入庫中的three。該包只提供常用的模型加載，燈光，HDR等相關(guān)能力，更細(xì)致的控制需要在模型初始化后獲取對(duì)象進(jìn)行操作
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實(shí)例</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>