OpenLayers ol-ext:Transform 对象,旋转、拉伸、放大

OpenLayers ol-ext:Transform 对象,旋转、拉伸、放大_第1张图片
OpenLayers引用ol-ext:Transform能够对Feature图形进行放大、缩小、移动、旋转、拉伸等操作,非常好用。
代码:

    transformFeature() {
      var _this = this
      if (this.transform !== null || this.transform !== '') {
        this.map.removeInteraction(this.transform)
      }
      this.editMenuStyle.height = '0px'
      const transform = new Transform({
        enableRotatedTransform: false,
        addCondition: shiftKeyOnly,
        hitTolerance: 2,
        // Translate when click on feature
        translateFeature: false,
        // Can translate the feature
        translate: true,
        stretch: true,
        scale: true,
        rotate: true
      })
      var firstPoint = false
      var startangle = 0
      var d = [0, 0]
      transform.on(['select'], function(e) {
        if (firstPoint && e.features && e.features.getLength()) {
          transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
        }
      })
      transform.on(['rotatestart', 'translatestart'], function(e) {
        // Rotation
        startangle = e.feature.get('angle') || 0
        // Translation
        d = [0, 0]
      })
      transform.on('rotating', function(e) {
        // Set angle attribute to be used on style !
        e.feature.set('angle', startangle - e.angle)
      })
      transform.on('translating', function(e) {
        d[0] += e.delta[0]
        d[1] += e.delta[1]
        if (firstPoint) {
          transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
        }
      })
      transform.on('scaling', function(e) {
        if (firstPoint) {
          transform.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate())
        }
      })
      transform.on(['rotateend', 'translateend', 'scaleend'], function(e) {
        _this.editFeatureCoord(e.feature)
      })
      this.transform = transform
      this.map.addInteraction(this.transform)
    },

你可能感兴趣的:(OpenLayers)