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)
    },
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值