解决使用Arcgis for API Javascript中的Draw画完之后无法清除画布问题

一、绘制巡检区域

    //绘制巡检区域
    drawArea() {
      loadModules(
        [
          'esri/Graphic',
          'esri/views/draw/Draw',
          'esri/geometry/Point',
          'esri/geometry/Polyline',
          'esri/geometry/Polygon'
        ])
        .then(([Graphic, Draw, Point, Polyline, Polygon]) => {
          this.isDrawing = true

          this.view.focus()

          const draw = new Draw({
            view: this.view
          })


          const action = draw.create('polygon', { mode: 'click' })
          this.action = action
          action.on(['vertex-add', 'vertex-remove'], (event) => {
            //少于两点无法展示线
            let vertices = event.vertices
            if (vertices.length < 2) {
              return
            }

            //绘制测距线，并将其添加到地图
            var polyLine = new Polyline({
              paths: vertices,
              spatialReference: this.view.spatialReference
            })
            const graphic = new Graphic({
              geometry: polyLine,
              symbol: {
                type: 'simple-line',
                cap: 'round',
                join: 'round',
                color: '#14D3C6'
              }
            })
            this.graphicsLayer.add(graphic)
          })

          action.on(['draw-complete'], (event) => {
            //生成绘制的图形
            let vertices = event.vertices
            let polygon = new Polygon({
              rings: vertices,
              spatialReference: this.view.spatialReference
            })
            let graphic = new Graphic({
              geometry: polygon,
              symbol: {
                type: 'simple-fill',
                color: [171,249,229,0.5],
                style: 'solid',
                outline: {
                  color: '#14D3C6',
                  width: 1
                }
              }
            })
            this.graphicsLayer.add(graphic)

            //添加巡检区域坐标
            for (let i = 0; i < vertices.length; i++) {
              let point = new Point({
                x: vertices[i][0],
                y: vertices[i][1],
                spatialReference: this.view.spatialReference
              })
              if (!this.form.hasOwnProperty('gpsAreaZbList')) {
                this.form.gpsAreaZbList = [];
              }
              this.form.gpsAreaZbList.push({
                weidu: Number(point.latitude).toFixed(8),
                jingdu: Number(point.longitude).toFixed(8),
                sOrder: i + 1,
                type: 0
              })
            }
            this.isDrawing = false
            // 禁用绘制工具
            action.destroy();
          })
        })
    },

二，清除图层(注意得用destroy)

    //清除
    clear() {
      //删除巡检区域坐标和关键点坐标数据
      this.form.gpsAreaZbList = []
      //清除图层
      this.graphicsLayer.removeAll()
      this.action.destroy();
    },