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

绘制效果:
OpenLayers 画圆画椭圆_第1张图片

你可能感兴趣的:(OpenLayers,javascript,OpenLayers)