标签：VUE API let amap lng polyEditor 高德 AMap

目前网上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)

效果

功能

• 支持多个区域查看
• 单个区域编辑

安装

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: '你的高德Key',
        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.init()
    }
  }
}
</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'
import { getGeo } from '@/api/system/amap'

export default {
  name: 'Test',
  components: { AMapPolygon2_0 },
  data() {
    return {
      center: [],
      path: [],
      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.push(path)
  },
  methods: {
    getPolygonMap(polygon) {
      //接收坐标集合
    },
    clearPolygonMap() {
      //清空坐标集合
    },
}

</script>

标签：VUE,API,let,amap,lng,polyEditor,高德,AMap
来源： https://www.cnblogs.com/bookc/p/15162027.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。