Vue使用openlayers实现绘制圆形和多边形

sourcePoint = new VectorSource()   // 创建数据源
layerPoint = new VectorLayer({     // 创建图层
    zIndex: 1,   // 图层的层级
})
layerPoint.setSource(sourcePoint)  // 把数据源绑定到图层上面
map.addLayer(layerPoint)  // 把图层添加到地图上面去

	  // 绘制圆形
      addCircle() {
        let feature = new Feature({
          title: 'beijing',
          geometry: new Circle(fromLonLat([116.400819, 39.916263]), this.getRadius(500)),  // 创建 以[116.400819, 39.916263]为圆心，500米为半径的圆，但是这个半径不是很准，没解决了
        })
        feature.setStyle(
          new Style({
            fill: new Fill({
              color: 'rgba(32, 157, 230, 0.5)'
            })
          })
        )
        sourcePoint .addFeatures([feature])
      },

		source = new VectorSource();
        vector = new VectorLayer({
          source: source,
          style: new Style({
            fill: new Fill({
              color: 'rgba(255, 255, 255, 0.2)',
            }),
            stroke: new Stroke({
              color: '#ffcc33',
              width: 3,
            }),
            image: new CircleStyle({
              radius: 3,
              fill: new Fill({
                color: '#ffcc33',
              }),
            }),
          }),
        });
        map.addLayer(vector)
        modify = new Modify({ source: source });
        snap = new Snap({ source: source });
        draw = new Draw({
          source: source,
          type: 'PolyGon',
        });

	map.addInteraction(modify);
        map.addInteraction(draw);
        map.addInteraction(snap);
        draw.on('drawend', e => {//绘画完成触发时间
          const geometry = e.feature.getGeometry()
          const corrdinates = geometry.getCoordinates()
          let points = []
          corrdinates[0].forEach(item => {
            let xy = transfORM(item, 'EPSG:3857', 'EPSG:4326')  // 转换成经纬度坐标
            points.push(xy)
          })
          this.$message.success('顶点坐标是：' + JSON.stringify(points))
          map.removeInteraction(draw);  //移除交互
          map.removeInteraction(snap);  //移除交互
          map.removeInteraction(modify);  //移除交互
        });

map.addInteraction(modify);
map.addInteraction(snap);

	map.removeInteraction(draw);//移除绘画互动
        map.removeInteraction(snap);//移除绘画互动
        map.removeInteraction(modify);//移除绘画互动
        let feature = source.getFeatures()[0]
        const geometry = feature.getGeometry()
        const corrdinates = geometry.getCoordinates()
        let points = []
        corrdinates[0].forEach(item => {
          let xy = transform(item, 'EPSG:3857', 'EPSG:4326')
          points.push(xy)
        })
        this.$message.success('顶点坐标是：' + jsON.stringify(points))