ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听

官网

示例地址：ol-ext

代码地址： ol-ext: openlayers开源插件库

文档api：查看OpenLayers - Welcome

简单功能示例

 

自己项目中用到的是 等比例缩放，旋转，拉伸等功能

代码如下

        import ExtTransform from  'ol-ext/interaction/Transform'
        import {always} from 'ol/events/condition'


        const transform = new ExtTransform({
            enableRotatedTransform: false,
            hitTolerance: 2,
            translate: true, // 拖拽
            stretch: false, // 拉伸
            scale: true, // 缩放
            rotate: true, // 旋转
            translateFeature: false, // true值时，点击feature即可移动
            keepAspectRatio: always,// always 保持同比例缩放， undefined 任意缩放，形状可能改变
            noFlip: true,
            layers: [_this.mapObj.drawLayer], // 支持的transform的图层
        })


       // 事件监听
        transform.on(['rotateend', 'translateend', 'scaleend'], function (e) {
          _this.resultObj.fea = e.feature
          transform.setActive(false)
          setTimeout(() => {
             transform.setActive(true)
          }, 100);
          _this.mapObj.savelaybtn.setPosition(e.target.coordinate_);
        });

 官方示例代码

初始化示例：

    var interaction = new ol.interaction.Transform ({
      enableRotatedTransform: false,
      /* Limit interaction inside bbox * /
      condition: function(e, features) {
        return ol.extent.containsXY([-465960, 5536486, 1001630, 6514880], e.coordinate[0], e.coordinate[1]);
      },
      /* */
      addCondition: ol.events.condition.shiftKeyOnly,
      // filter: function(f,l) { return f.getGeometry().getType()==='Polygon'; },
      // layers: [vector],
      hitTolerance: 2,
      translateFeature: $("#translateFeature").prop('checked'),
      scale: $("#scale").prop('checked'),
      rotate: $("#rotate").prop('checked'),
      keepAspectRatio: $("#keepAspectRatio").prop('checked') ? ol.events.condition.always : undefined,
      keepRectangle: false,
      translate: $("#translate").prop('checked'),
      stretch: $("#stretch").prop('checked')
    });
    map.addInteraction(interaction);
   
  

动态修改某个属性值

/** Set properties
    */
interaction.set("keepAspectRatio", ol.events.condition.always

设置样式

 /** Style the transform handles for the current interaction
    */

    function setHandleStyle(){
      if (!interaction instanceof ol.interaction.Transform) return;
      if ($("#style").prop('checked')) {
        // Style the rotate handle
        var circle = new ol.style.RegularShape({
          fill: new ol.style.Fill({color:[255,255,255,0.01]}),
          stroke: new ol.style.Stroke({width:1, color:[0,0,0,0.01]}),
          radius: 8,
          points: 10
        });
        interaction.setStyle ('rotate',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf0e2', 
              font:"16px Fontawesome",
              textAlign: "left",
              fill:new ol.style.Fill({color:'red'})
            }),
            image: circle
          }));
        // Center of rotation
        interaction.setStyle ('rotate0',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf0e2', 
              font:"20px Fontawesome",
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            }),
          }));
        // Style the move handle
        interaction.setStyle('translate',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf047', 
              font:"20px Fontawesome", 
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            })
          }));
        // Style the strech handles
        /* uncomment to style * /
        interaction.setStyle ('scaleh1', 
          new ol.style.Style({
            text: new ol.style.Text ({
            text:'\uf07d', 
            font:"bold 20px Fontawesome", 
            fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
            stroke: new ol.style.Stroke({ width:2, color:'red' })
          })
        }));
        interaction.style.scaleh3 = interaction.style.scaleh1;
        interaction.setStyle('scalev',
          new ol.style.Style({
            text: new ol.style.Text ({
              text:'\uf07e', 
              font:"bold 20px Fontawesome", 
              fill: new ol.style.Fill({ color:[255,255,255,0.8] }),
              stroke: new ol.style.Stroke({ width:2, color:'red' })
            })
          }));
        interaction.style.scalev2 = interaction.style.scalev;
        /**/
      } else {
        interaction.setDefaultStyle ();
      }
      // Refresh
      interaction.set('translate', interaction.get('translate'));
    };

事件监听

  // Events handlers
    var startangle = 0;
    var d=[0,0];

    // Handle rotate on first point
    var firstPoint = false;
    interaction.on (['select'], function(e) {
      if (firstPoint && e.features && e.features.getLength()) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });

    interaction.on (['rotatestart','translatestart'], function(e){
      // Rotation
      startangle = e.feature.get('angle')||0;
      // Translation
      d=[0,0];
    });
    interaction.on('rotating', function (e){
      $('#info').text("rotate: "+((e.angle*180/Math.PI -180)%360+180).toFixed(2)); 
      // Set angle attribute to be used on style !
      e.feature.set('angle', startangle - e.angle);
    });
    interaction.on('translating', function (e){
      d[0]+=e.delta[0];
      d[1]+=e.delta[1];
      $('#info').text("translate: "+d[0].toFixed(2)+","+d[1].toFixed(2)); 
      if (firstPoint) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });
    interaction.on('scaling', function (e){
      $('#info').text("scale: "+e.scale[0].toFixed(2)+","+e.scale[1].toFixed(2)); 
      if (firstPoint) {
        interaction.setCenter(e.features.getArray()[0].getGeometry().getFirstCoordinate());
      }
    });
    interaction.on(['rotateend', 'translateend', 'scaleend'], function (e) {
      $('#info').text(""); 
    });