SOURCE

function loadMap (key, plugins, v = '1.4.14') {
  return new Promise(function (resolve, reject) {
    if (typeof AMap !== 'undefined') {
      // eslint-disable-next-line no-undef
      resolve(AMap)
      return true
    }
    window.onCallback = function () {
      // eslint-disable-next-line no-undef
      resolve(AMap)
    }
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `https://webapi.amap.com/maps?v=${v}&key=${key}&plugin=${plugins}&callback=onCallback`
    script.onerror = reject
    document.head.appendChild(script)
  })
}
var Main = {
    data () {
    return {
      // 地图实例
      GDMap: null,
      // 加载的一些插件
      // 更多参考：https://lbs.amap.com/api/javascript-api/guide/abc/plugins#plugins
      plugins: [
        'AMap.OverView',
        'AMap.MouseTool',
        'AMap.PolyEditor',
        'AMap.RectangleEditor',
        'AMap.PlaceSearch',
        'AMap.DistrictLayer',
        'AMap.CustomLayer'
      ],
      // key
      key: 'c5eac55551560531336988396dacbf53',
      // 地图版本
      v: '1.4.14',
      loading: true,
      // 多边形集合
      polygons: [
        [
    [121.25290469980263,31.34974176962973],[121.2528655543641,31.349711498299133],[121.2529121270065,31.349732054749214],[121.2529894906076,31.349630831643275],[121.25319326704364,31.349364206412815],[121.25575672611494,31.345015708214863],[121.2557531625113,31.344977972269426],[121.25574733647554,31.344962118342846],[121.2557311068504,31.344934006819678],[121.25571593551146,31.3449164043951],[121.25567697104601,31.344888267626825],[121.25186818607068,31.3432413993653],[121.25200017421045,31.343004528145183],[121.25248864131,31.34216818368205],[121.25304127857812,31.341195559601864],[121.25302623561181,31.341151813250693],[121.25219200172144,31.34074061178436],[121.2517549872139,31.340542372488592],[121.25101835332255,31.34022979505772],[121.25062143393357,31.340045345070536],[121.24915194555875,31.339396499616505],[121.2487049427537,31.339190178940207],[121.24861042801481,31.339146554532217],[121.24732860827403,31.338567008179297],[121.24700707025109,31.33842379377126],[121.24628228321399,31.338089363224267],[121.2462416948779,31.338070331671965],[121.24556827567756,31.337765346323575],[121.2453703702106,31.3376816615304],[121.2443622219868,31.337225759311124],[121.24364662048428,31.33690498517695],[121.24284954175513,31.336559915829667],[121.24261999008894,31.33645950868541],[121.24177389529731,31.336044944188306],[121.23992762696417,31.338609119839326],[121.23926503963257,31.33942838147563],[121.23889845313278,31.339879356723994],[121.23880596125794,31.339793141215164],[121.23875348932566,31.33974897843349],[121.238725789137,31.339725664529038],[121.23846657424816,31.33954724128624],[121.23841040356527,31.339500422803138],[121.23826347997237,31.33937795996454],[121.23821968296478,31.339333849384737],[121.23814992858489,31.33926359610864],[121.23805504683699,31.3391389259552],[121.23765021659091,31.33880380753621],[121.2372547115358,31.338513298087506],[121.23721373127893,31.338481346696863],[121.23717989945786,31.33845497046589],[121.23691400794542,31.338217072259333],[121.23678453498351,31.338136395643613],[121.23671759093516,31.338094695691197],[121.23641696698601,31.337931132946938],[121.2361737969205,31.33778816521397],[121.23590123199405,31.33766693543848],[121.23550038551166,31.33744504672109],[121.23541835310274,31.33739409000346],[121.23526822503864,31.337300832737167],[121.23520895515962,31.337264018330252],[121.2351302889861,31.337215155731833],[121.23473572883915,31.337024921129174],[121.23450048842767,31.336911500753377],[121.23434959262566,31.336833843603696],[121.234337018029,31.336827372220345],[121.2335353879725,31.3378786783104],[121.2335265345937,31.337875878641707],[121.23172709498134,31.340203775957693],[121.23171165548983,31.340223748393],[121.23161097269899,31.34035400030003],[121.23027704438762,31.342072493054175],[121.22589737997723,31.34773056754075],[121.22585271203775,31.347788574553448],[121.22571669069256,31.347965210407164],[121.22553693894181,31.348198634932235],[121.22665124963706,31.348656892916566],[121.22709697288842,31.348840196660092],[121.22737475051404,31.348951846428452],[121.22793092104138,31.34919396487823],[121.22965927130603,31.34986654612623],[121.23163681621449,31.350613775973184],[121.23484506373849,31.35173010976622],[121.23553930668406,31.351973188779304],[121.24026048781289,31.353610987602895],[121.24032782214242,31.35363434610817],[121.24050085273147,31.353694370488295],[121.24132826052907,31.35400390229152],[121.2450207225317,31.35528347132752],[121.24709627814195,31.356003997233238],[121.24900406633226,31.356738612970393],[121.24939474491299,31.35601728984521],[121.2493710244683,31.356007608962102],[121.24959487147224,31.3555879076165],[121.25071109278153,31.353658203222086],[121.25085649082169,31.35339760850005],[121.25196294005285,31.35153087350288],[121.25216086734856,31.35119377514768],[121.25293384505541,31.34985801781751],[121.25293872562415,31.349819339399883],[121.25293063589672,31.34978105557039],[121.25290469980263,31.34974176962973]
        ]
      ],
      polygonsGroup: null, // 多边形OverlayGroup集合实例，方便管理
      isDrawing: false, // 是否正在绘制
      drawingPolygon: {
        polyline: null, // 绘制过程中的折线实例
        polylinePath: [], // 折线的path
        polygon: null, // 根据折线路径自动生成的多边形的实例
        pointsGroup: null, // 绘制过程中点的集合的实例
        pointOnLine: null, // 多边形边上的点的实例
        isOnPolygon: null // 点是否在多边形上
      },
      styles: {
        // 圆点option
        circleMarker: {
          radius: 4,
          strokeColor: '#010301',
          strokeWeight: 2,
          strokeOpacity: 1,
          fillColor: '#FFFFFF',
          fillOpacity: 1,
          bubble: true,
          cursor: 'pointer',
          clickable: true,
          zIndex: 999999
        },
        // 绘制过程中折线的option
        drawingPolyline: {
          strokeColor: '#dd9ab0',
          strokeWeight: 5,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 20],
          bubble: true
        },
        polygon: {
          fillColor: '#DC3021', // 填充色
          fillOpacity: 0.2, // 填充透明度
          strokeColor: '#DC3021', // 轮廓颜色
          strokeWeight: 1, // 轮廓宽度
          strokeOpacity: 0.9 // 轮廓透明度
        }
      }
    }
  },
  mounted () {
    loadMap(this.key, this.plugins, this.v)
      .then(AMap => {
        this.GDMap = new AMap.Map('GDMap', {
          zoom: 11,
          center: [121.25290469980263,31.34974176962973],
          isHotspot: false
        })
        // 绑定地图单击事件
        this.GDMap.on('click', this.mapOnClick)
        // 地图双击事件
        this.GDMap.on('dblclick', this.mapOnDblclick)
        // 绑定地图鼠标移动事件
        this.GDMap.on('mousemove', this.mapOnMouseMove)

        this.GDMap.on('complete', () => {
          // 地图加载完成后初始化已有的多边形
          this.polygons.forEach(polygon => {
            this.addPolygon(polygon)
          })
        })
      })
      .catch(() => {
        console.log('地图加载失败！')
      })
  },
  methods: {
    drawPolygon () {
      this.isDrawing = true
    },
    // 地图点击事件
    mapOnClick (ev) {
      if (!this.isDrawing) return
      let position = [ev.lnglat.lng, ev.lnglat.lat] // 鼠标点击的坐标
      // 判断是否存在存在线上圆点实例及是否在线上
      if (this.drawingPolygon.isOnPolygon && this.drawingPolygon.pointOnLine) {
        const center = this.drawingPolygon.pointOnLine.getCenter() // 获取线上圆点的中心
        position = [center.lng, center.lat]
      }
      this.addPolygonPoint(position) // 地图上增加相应的点
      this.addDrawingPolyline([position, position]) // 添加绘制过程中的鼠标移动位置的折线
      this.drawPolygonByPoints() // 通过点围成多边形
    },
    // 地图双击事件
    mapOnDblclick (ev) {
      if (!this.isDrawing) return
      this.complateDraw()
    },
    // 地图鼠标移动事件
    mapOnMouseMove (ev) {
      if (!this.isDrawing) return
      const position = [ev.lnglat.lng, ev.lnglat.lat]
      const linePath = this.getPointLine(position) // 获取点所在的线
      let recentPoint = null // 定义最近的点
      if (this.drawingPolygon.isOnPolygon) {
        // 如果点在线上（这个点存在偏移，所以还得通过getRecentPoint获取到正在的最近的一个点）
        // 获取该点到线的最近的一个点
        recentPoint = this.getRecentPoint(linePath, position)
        this.addDrawingOnLinePoint(recentPoint) // 在线上添加圆点，也就是自动吸附的时候创建的点
      } else {
        this.removeDrawingOnLinePoint()
      }
      this.setDrawingPolyline(position)
    },
    // 添加围成多边形的点
    addPolygonPoint (position) {
      // 样式及坐标option
      const option = {
        ...this.styles.circleMarker,
        center: position
      }
      const circlePointMarker = new AMap.CircleMarker(option) // 单个圆点实例
      // 先判断是否存在圆点集合实例
      // 所有的圆点这里通过高德提供的OverlayGroup统一管理
      if (!this.drawingPolygon.pointsGroup) { // 如果不存在
        this.drawingPolygon.pointsGroup = new AMap.OverlayGroup() // 创建绘制过程中点的集合的实例
        this.GDMap.add(this.drawingPolygon.pointsGroup) // 将集合添加到地图上显示
      }
      this.drawingPolygon.pointsGroup.addOverlay(circlePointMarker) // 将点添加到集合里面
    },
    // 新增绘制中的折线
    addDrawingPolyline (paths) {
      // 判断有无折线
      if (this.drawingPolygon.polyline) {
        this.drawingPolygon.polyline.setPath(paths) // 有的话直接设置折线路径
      } else { // 没有的话需要创建折线
        // 折线样式及路径
        const option = {
          ...this.styles.drawingPolyline,
          path: paths
        }
        this.drawingPolygon.polyline = new AMap.Polyline(option) // 生成折线
        this.GDMap.add(this.drawingPolygon.polyline) // 地图上添加折线
      }
      this.drawingPolygon.polylinePath = paths // 存一下折线的路径
    },
    // 设置绘制中的折线的路径
    setDrawingPolyline (position) {
      if (this.drawingPolygon.polyline) {
        // 新增的折线的路径，由上次记录折线的开始点+鼠标坐标位置点
        const linePath = [
          this.drawingPolygon.polylinePath[0], // 上次记录折线的开始点
          position // 鼠标坐标位置点
        ]
        this.drawingPolygon.polyline.setPath(linePath)
        this.drawingPolygon.polylinePath = linePath
      }
    },
    // 根据点画区块多边形
    drawPolygonByPoints () {
      const pointsGroup = this.drawingPolygon.pointsGroup // 点及的集合实例
      const pointsLength = pointsGroup ? pointsGroup.getOverlays().length : 0 // 点的长度
      if (pointsLength > 1) {
        // 获取每个点的中心点组成path
        const paths = pointsGroup.getOverlays().map(item => {
          const path = item.getCenter()
          return [path.lng, path.lat]
        })
        // 地图上绘制多边形
        if (this.drawingPolygon.polygon) {
          this.drawingPolygon.polygon.setPath(paths)
        } else {
          const option = {
            ...this.styles.polygon,
            path: paths
          }
          this.drawingPolygon.polygon = new AMap.Polygon(option)
          this.drawingPolygon.polygon.setMap(this.GDMap)
        }
      }
    },
    // 绘制完成
    complateDraw () {
      const paths = this.drawingPolygon.polygon.getPath().map(item => [item.lng, item.lat]) // 绘制完成的多边形path
      this.isDrawing = false // 取消绘制
      this.polygons.push(paths) // 添加绘制的多边形
      this.addPolygon(paths) // 地图上添加绘制的多边形
      this.clearUselessOverlays() // 清理数据
      console.log(paths)
    },
    // 清理无用的图层
    clearUselessOverlays () {
      if (!this.GDMap) return
      this.GDMap.remove(this.drawingPolygon.polyline)
      this.GDMap.remove(this.drawingPolygon.polygon)
      this.GDMap.remove(this.drawingPolygon.pointsGroup)
      if (this.drawingPolygon.pointOnLine) {
        this.GDMap.remove(this.drawingPolygon.pointOnLine)
      }
      this.drawingPolygon.polyline = null
      this.drawingPolygon.polygon = null
      this.drawingPolygon.pointsGroup = null
      this.drawingPolygon.polylinePath = []
      this.drawingPolygon.isOnPolygon = false
    },
    // 添加多边形
    addPolygon (paths) {
      if (!this.GDMap) return
      const option = {
        ...this.styles.polygon,
        path: [...paths]
      }
      const polygon = new AMap.Polygon(option)
      if (!this.polygonsGroup) {
        this.polygonsGroup = new AMap.OverlayGroup()
        this.GDMap.add(this.polygonsGroup)
      }
      this.polygonsGroup.addOverlay(polygon)
    },
    // 添加多边形边线上的点
    addDrawingOnLinePoint (center) {
      if (this.drawingPolygon.pointOnLine) {
        this.drawingPolygon.pointOnLine.setCenter(center)
        return
      }
      const option = {
        map: this.GDMap,
        center: center,
        ...this.styles.circleMarker
      }
      this.drawingPolygon.pointOnLine = new AMap.CircleMarker(option)
    },
    // 移除多边形线上的点
    removeDrawingOnLinePoint () {
      if (this.drawingPolygon.pointOnLine) {
        this.GDMap.remove(this.drawingPolygon.pointOnLine)
        this.drawingPolygon.pointOnLine = null
      }
    },
    // 获取点所在的线
    getPointLine (position) {
      const resolution = this.GDMap.getResolution()// 获取指定位置的地图分辨率，单位：米/像素
      const pointWidth = 6 * resolution// 线段上圆点的宽度，也就是误差
      let linePath = []
      this.drawingPolygon.isOnPolygon = false // 默认点不在线上
      // 循环所有的多边形，取到所有的线一一比较，存在性能问题
      for (let i = 0; i < this.polygons.length; i++) {
        const itemPath = this.polygons[i]
        let hasFind = false
        for (let n = 0; n < itemPath.length; n++) {
          const path = itemPath[n]
          const nextPath = itemPath[n + 1]
          const line = nextPath ? [path, nextPath] : [path, itemPath[0]]
          // 高德地图提供的isPointOnSegment判断点是否在线段上
          const isPointOnSegment = AMap.GeometryUtil.isPointOnSegment(position, line[0], line[1], pointWidth)
          if (isPointOnSegment) {
            linePath = line
            this.drawingPolygon.isOnPolygon = true
            hasFind = true
            break
          }
        }
        if (hasFind) break
      }
      return linePath
    },
    // 获取最近的点的坐标
    getRecentPoint (paths, curPointPosition) {
      const recentPoint = AMap.GeometryUtil.closestOnLine(curPointPosition, paths)
      return recentPoint
    }

  },
  watch: {
    isDrawing (newState) {
      if (newState) {
        this.GDMap.setDefaultCursor('crosshair')
      } else {
        this.GDMap.setDefaultCursor('')
      }
      this.GDMap.setStatus({
        doubleClickZoom: !newState
      })
    }
  }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js">
</script>
<div id="app">
  <template>
    <div class="map">
      <button type="primary" @click="drawPolygon">
        画多边形
      </button>
      <div id="GDMap">
      </div>
    </div>
  </template>
</div>

#GDMap {
  width: 1200px;
  height: 500px;
  position: relative;
}