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
    },

繪製效果：