openlayers在地图上绘制区域面

// vue中使用场景

<el-button type="primary" plain size="small" @click="polygonFn">开启绘制</el-button>
<el-button type="info" plain size="small" @click="stopFn">关闭绘制</el-button>

var map = {}
var draw // 创建绘制

polygonFn () {
      var _this = this
      if (draw != undefined && draw != null) {
        map.removeInteraction(draw)
      }
      draw = new ol.interaction.Draw({
        source: source,
        type: 'Polygon',
        style: new ol.style.Style({
          image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
              color: '#03a9f4'
            })
          }),
          stroke: new ol.style.Stroke({
            color: '#03a9f4',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.7)'
          })
        })
      })
      map.addInteraction(draw)
    },

stopFn () {
      if (draw != undefined && draw != null) {
        map.removeInteraction(draw)
      }
    },