OpenLayers ol-ext:Transform 對象,旋轉、拉伸、放大

在這裏插入圖片描述
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)
    },
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章