VUE 高德地圖原生API 實現矢量多邊形功能

目前網上vue封裝的第三方組件都是基於高德1.0的版本，使用體驗感較差，本文直接是基於2.0官網的API的矢量多邊形功能

參考文檔

JSAPI 的加載-入門-教程-地圖 JS API v2.0|高德地圖API (amap.com)
多邊形編輯器-矢量覆蓋物編輯-示例中心-JS API 2.0 示例 | 高德地圖API (amap.com)
矢量圖形-覆蓋物-教程-地圖 JS API v2.0|高德地圖API (amap.com)
參考手冊-地圖 JS API v2.0 | 高德地圖API (amap.com)

效果

功能

1. 支持多個區域查看
2. 單個區域編輯

安裝

npm i @amap/amap-jsapi-loader --save

代碼

<template>
  <div>
    <div id="container"></div>
    <div class="input-card" style="width: 120px" v-if="isEdit">
      <button class="btn" @click="openPoly()" style="margin-bottom: 5px">開始編輯</button>
      <button class="btn" @click="closePoly()" style="margin-bottom: 5px">結束編輯</button>
      <button class="btn" @click="clearPoly()">清空</button>
    </div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'AMapPolygon2_0',
  props: {
    name: {
      type: String,
      default: function() {
        return ''
      }
    },
    isEdit: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    areas: {
      type: Array,
      default: function() {
        return []
      }
    },
    center: {
      type: Array,
      default: function() {
        return [121.59996, 31.197646]
      }
    }
  },
  data() {
    return { polyEditor: null, polygonPaths: [], map: null, polygons: [] }
  },
  watch: {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      await this.initMap()
      this.initAreas()
      if (this.isEdit) {
        this.initPoly()
      }
    },
    async initMap() {
      let AMap = await AMapLoader.load({
        key: 'c757f7df889a3cc0ae3eb02cb9b5d68d',
        version: '2.0',
        plugins: [
          'AMap.PolygonEditor',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.Scale',
          'AMap.OverView',
          'AMap.ToolBar',
          'AMap.MapType',
          'AMap.PolyEditor',
          'AMap.CircleEditor',
          'AMap.Geolocation',
          'AMap.Geocoder',
          'AMap.AMapUI']

      })
      this.map = new AMap.Map('container', {
        center: this.center,
        zoom: 12,
        plugin: [   //一些工具插件
          {
            pName: 'MapType',  //地圖類型
            defaultType: 0,
            events: {
              init(instance) {
              }
            }
          }
        ]
      })

      // 縮放地圖到合適的視野級別
      this.map.setFitView()
    },
    initAreas() {
      for (let i = 0; i < this.areas.length; i++) {
        let area = this.areas[i]
        let path = []
        for (let j = 0; j < area.length; j++) {
          path.push([area[j].lng, area[j].lat])
        }
        if (path.length <= 0) {
          continue
        }
        var polygon = new AMap.Polygon({
          path: path,
          strokeColor: 'green',
          strokeWeight: 6,
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          fillColor: '#1791fc',
          zIndex: 50,
          bubble: true
        })
        this.polygons.push(polygon)
      }
      if (this.polygons.length <= 0) {
        return
      }
      //地圖上新增矢量多邊形
      this.map.add(this.polygons)
    },
    initPoly() {
      if (this.polygons.length > 0) {
        this.polyEditor = new AMap.PolygonEditor(this.map, this.polygons[0])
      } else {
        this.polyEditor = new AMap.PolygonEditor(this.map)
      }
      // this.polyEditor.open()
      let _this = this
      //關閉多邊形編輯polygonEditor.close()觸發該方法；
      this.polyEditor.on('end', function(event) {
        // event.target 即爲編輯後的多邊形對象,event.target.getPath()得到編輯完成後的點數組
        let pointArr = event.target.getPath()
        this.polygonPaths = []
        for (let i = 0; i < pointArr.length; i++) {
          this.polygonPaths.push({ lat: pointArr[i].lat, lng: pointArr[i].lng })
        }
        _this.$emit('getPolygonMap', this.polygonPaths)
        console.log('polygonPaths', this.polygonPaths)
      })
    },
    openPoly() {
      this.polyEditor.open()
    },
    closePoly() {
      this.polyEditor.close()
    },
    clearPoly() {
      this.$emit('clearPolygonMap')
      this.map.destroy()
      this.reset()
      this.init()
    },
    reset() {
      this.polyEditor = null
      this.polygonPaths = []
      this.map = null
      this.polygons = []
    }
  }
}
</script>
<style scoped lang="scss">
#container {
  width: 100%;
  height: 600px;
}
</style>

使用

<template>
  <div>
    <AMapPolygon2_0 ref="PolygonMap"
                    :isEdit="true"
                    :areas="areas"
                    :center="center"
                    @getPolygonMap="getPolygonMap"
                    @clearPolygonMap="clearPolygonMap"
    ></AMapPolygon2_0>
  </div>
</template>
<script>
import AMapPolygon2_0 from '@/components/AMapPolygon2_0'

export default {
  name: 'Test',
  components: { AMapPolygon2_0 },
  data() {
    return {
      center: [116.403322, 39.920255],
      areas: []
    }
  },
  created() {
  },
  mounted() {
    var path = [
      { lng: 116.403322, lat: 39.920255 },
      { lng: 116.410703, lat: 39.897555 },
      { lng: 116.402292, lat: 39.892353 },
      { lng: 116.389846, lat: 39.891365 }
    ]
    this.areas = [path]
  },
  methods: {
    getPolygonMap(polygon) {
      //接收座標集合
    },
    clearPolygonMap() {
      //清空座標集合
      this.areas = []
    }
  }
}
</script>