前言

最近业务中遇到一个需求，要在地图上画圆范围在地图上并且能编辑，而客户是没有坐标提供的。这里使用的是高德地图，并没有找到相关的可以直接画圆和编辑的功能，所以这里采用 绘制覆盖物 + 覆盖物编辑 来实现效果。

效果可参考线上地址

步骤

这里大概解释一下步骤，查看详细代码可以直接跳过

1. 创建vue2项目，添加 JSAPI Loader 依赖

2. 初始化地图

3. 添加 鼠标工具-绘制覆盖物

4. 添加 椭圆形编辑器

详细代码

<template>
  <div id="app">
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
   <button class="btn" @click="drawCircle()" style="margin-top: 20px">绘制圆形</button>
   <!-- <button class="btn" @click="ellipseEditor.open()" style="margin-bottom: 5px">开始编辑</button> -->
   <button class="btn" @click="ellipseEditor.close()">结束编辑</button>
  </div>
  </div>
</template>

<script>
import MapLoader from './gaode_init'
export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      ellipseEditor: null,
      mouseTool: null
    }
  },
  created () {
    this.load() // 在创建完load实例后调用
  },
  methods: {
    load () {
      this.loadMap().then(() => {
        // this.geolocation1()
        this.initMap()
        // this.draw()
        this.initMouseTool()
      })
    },
    loadMap () {
      return MapLoader()
        .then((AMap) => {
          this.AMap = AMap // 加载地图，储存AMap数据？
        })
        .catch((e) => {
          console.log('地图加载失败', e)
        })
    },
    initMap () {
      //   var that = this
      this.map = new this.AMap.Map('container', {
        resizeEnable: true,
        // //初始化地图
        // resizeEnable: true,
        center: [116.433322, 39.900255],
        // // dragEnable: false, // 禁止拖动
        zoom: 16 // 缩放比例
      })
    },
    initMouseTool () {
      this.mouseTool = new this.AMap.MouseTool(this.map)
      this.mouseTool.on('draw', (overlay) => {
        var ellipse = new this.AMap.Ellipse({
          center: [overlay.obj._opts.center.lng, overlay.obj._opts.center.lat],
          radius: [overlay.obj._opts.radius, overlay.obj._opts.radius], // 半径
          borderWeight: 3,
          strokeColor: '#FF33FF',
          strokeOpacity: 1,
          strokeWeight: 6,
          // eslint-disable-next-line no-dupe-keys
          strokeOpacity: 0.2,
          fillOpacity: 0.4,
          // 线样式还支持 'dashed'
          strokeStyle: 'dashed',
          strokeDasharray: [10, 10],
          fillColor: '#1791fc',
          zIndex: 50
        })
        this.map.add(ellipse)
        // // 缩放地图到合适的视野级别
        // this.map.setFitView([ellipse])

        this.ellipseEditor = new this.AMap.EllipseEditor(this.map, ellipse)
        // 多边形-左键操作
        ellipse.on('click', () => {
          this.ellipseEditor && this.ellipseEditor.close()
          this.ellipseEditor = new this.AMap.EllipseEditor(this.map, ellipse)
          // this.polyEditor = new this.AMap.PolygonEditor(this.map, polygon)
          this.ellipseEditor.open()
        })
        this.mouseTool.close(true) // 关闭，并清除覆盖
      })
    },
    drawCircle () {
      console.log(this.mouseTool)
      this.mouseTool.circle({
        strokeColor: '#80d8ff'
      })
    },
    drawPolyline () {
      this.mouseTool.polyline({
        strokeColor: '#3366FF',
        strokeOpacity: 1,
        strokeWeight: 6,
        // 线样式还支持 'dashed'
        strokeStyle: 'solid'
        // strokeStyle是dashed时有效
        // strokeDasharray: [10, 5],
      })
    },
    drawPolygon () {
      this.mouseTool.polygon({
        strokeColor: '#FF33FF',
        strokeOpacity: 1,
        strokeWeight: 6,
        // eslint-disable-next-line no-dupe-keys
        strokeOpacity: 0.2,
        fillColor: '#1791fc',
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: 'solid'
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      })
    },
    fdrawRectangle () {
      this.mouseTool.rectangle({
        strokeColor: 'red',
        strokeOpacity: 0.5,
        strokeWeight: 6,
        fillColor: 'blue',
        fillOpacity: 0.5,
        // strokeStyle还支持 solid
        strokeStyle: 'solid'
        // strokeDasharray: [30,10],
      })
    }
  }
}
</script>
<style lang="less">
  #container {
    width: 100%;
    height: 100vh;
    margin: 0px;
  }
  .input-card{
    position: absolute;
    top: 0;
    left: 0;
  }
</style>