OpenLayers 画圆画椭圆

var draw; // global so we can remove it later
function addInteraction() {
  var value = typeSelect.value;
  if (value !== 'None') {
    draw = new Draw({
      source: source,
      type: 'Circle'
    });
    map.addInteraction(draw);
  }
}

这是OpenLayers官方自带的画圆的方法，实际体验非常不好用，都不知道画哪里去了，而且OpenLayers自带的还没有画椭圆，没办法了，只能自己写方法去画圆、画椭圆了！
画圆方法：先画一个矩形，获取中心点到矩形左边线的距离作为半径，生成一个圆。
画椭圆方法：先画一个矩形，获取中心点到矩形左边线的距离作为半径，生成一个圆，再获取中心点到上边线的距离，然后对圆进行一个类似压缩似的操作，形成一个椭圆。
注：代码用到了turf第三方库。
画圆代码：

// 画矩形
        this.draw = new Draw({
          source: drawLayer.getSource(),
          type: 'Circle',
          geometryFunction: createBox(),
          style: this.styleFunction,
          dragVertexDelay: 0,
          finishCondition: function(mapBrowserEvent) {
            // console.log(mapBrowserEvent)
          }
        })
        const circleFeature = _this.createCircle(feature)
        // 生成圆
    createCircle(feature) {
      const coords = feature.getGeometry().getCoordinates()
      const poly = turf.polygon(coords)
      var center = turf.center(poly)
      const radiusMajor = this.getRadiusMajor(center, coords)
      const centerCoord = center.geometry.coordinates
      var circle = new Circle(centerCoord, radiusMajor)
      var polygon = fromCircle(circle, 64)
      var newFeature = new Feature(polygon)
      return newFeature
    },
    // 获取圆心到左边线距离
    getRadiusMajor(center, coords) {
      if (coords[0].length !== 5) {
        this.$message.error('当前绘画的不是矩形')
        return
      }
      const centerCoord = center.geometry.coordinates
      const coord = coords[0][3]
      const coord1 = coords[0][4]
      const lineCenter = [[coord[0], (coord[1] + coord1[1]) / 2], centerCoord]
      const lineString = new LineString(lineCenter)
      const lineLength = lineString.getLength()
      return lineLength
    },

画椭圆代码：

// 画矩形
        this.draw = new Draw({
          source: drawLayer.getSource(),
          type: 'Circle',
          geometryFunction: createBox(),
          style: this.styleFunction,
          dragVertexDelay: 0,
          finishCondition: function(mapBrowserEvent) {
            // console.log(mapBrowserEvent)
          }
        })
        const ellipseFeature = _this.createEllipse(feature)
        // 生成椭圆
    createEllipse(feature) {
      const coords = feature.getGeometry().getCoordinates()
      const poly = turf.polygon(coords)
      var center = turf.center(poly)
      const radiusMajor = this.getRadiusMajor(center, coords)
      const radiusMinor = this.getRadiusMinor(center, coords)
      const centerCoord = center.geometry.coordinates
      var circle = new Circle(centerCoord, radiusMinor)
      var polygon = fromCircle(circle, 64)
      polygon.scale(radiusMajor / radiusMinor, 1)
      const newFeature = new Feature(polygon)
      return newFeature
    },
    // 获取圆心到左边线距离
    getRadiusMajor(center, coords) {
      if (coords[0].length !== 5) {
        this.$message.error('当前绘画的不是矩形')
        return
      }
      const centerCoord = center.geometry.coordinates
      const coord = coords[0][3]
      const coord1 = coords[0][4]
      const lineCenter = [[coord[0], (coord[1] + coord1[1]) / 2], centerCoord]
      const lineString = new LineString(lineCenter)
      const lineLength = lineString.getLength()
      return lineLength
    },
    // 获取圆心到上边线距离
    getRadiusMinor(center, coords) {
      if (coords[0].length !== 5) {
        this.$message.error('当前绘画的不是矩形')
        return
      }
      const centerCoord = center.geometry.coordinates
      const coord = coords[0][0]
      const coord1 = coords[0][1]
      const lineCenter = [[(coord[0] + coord1[0]) / 2, coord[1]], centerCoord]
      const lineString = new LineString(lineCenter)
      const lineLength = lineString.getLength()
      return lineLength
    },

绘制效果：