openlayer选择移动图标

我们通常使用OpenLayers的内置交互，但有时需要扩展功能。ol-ext是一个OpenLayers的扩展库，其中包含了一些额外的交互和控件。ol-ext 库中的 Transform 交互组件，用于在地图上对要素进行交互式变换（旋转、缩放、平移）。

首先，确保已经安装了ol-ext。如果没有，可以通过npm安装

js 复制代码

npm install ol-ext

导入ExtTransform。
创建一个ExtTransform交互对象，并可以配置一些选项。
将该交互添加到地图中。

js 复制代码

import ExtTransform from 'ol-ext/interaction/Transform'

 this.transform = new ExtTransform({
     // 交互模式
      enableRotatedTransform: true,    // 启用旋转后的变换
      translate: true,                 // 启用平移手柄
      stretch: true,                   // 启用拉伸（角手柄）
      scale: true,                     // 启用缩放（边手柄）
      rotate: true,                    // 启用旋转手柄
  
      // 行为控制
      keepAspectRatio: false,          // 拉伸时保持宽高比（按住Shift键）
      translateFeature: false,         // 点击要素内部时是否平移
      translateAnchor: false,          // 是否平移锚点
      noFlip: false,                   // 禁止几何图形翻转
  
      // 样式
      style: new Style({              // 控制点的样式
        image: new Circle({
          radius: 6,
          fill: new Fill({
            color: '#ff0000'
          }),
          stroke: new Stroke({
            color: '#ffffff',
            width: 2
          })
        })
      }),
  
      // 过滤器
      filter: function(feature, layer) {
        // 返回 true 表示该要素可变换
        return feature.get('transformable') === true
      }
   })
   this.map.addInteraction(this.transform)

   this.transform.setActive(false)

  //移动结束
   this.transform.on('translateend', (e)=>{
     console.log(e.target.coordinate_);
    
     // 获取变换后的几何图形
      const geometry = e.feature.getGeometry()
      console.log('变换后的坐标', geometry.getCoordinates())
  });
  
 
    // 删除变换控制点
    this.transform.on('stop', function(e) {
      console.log('变换交互停止')
    })

ExtTransform交互提供了多种事件，比如正在变换（'transforming'）变换过程中(transform)、变换结束（'transformend'），我们可以监听这些事件来执行一些操作（比如更新要素的属性或保存状态）。

ExtTransform可以动态控制变换

kotlin 复制代码

// 启用/禁用特定变换类型
this.transform.setTranslate(true)
this.transform.setScale(false)
this.transform.setRotate(true)
this.transform.setStretch(false)

// 设置要变换的要素
const features = this.vectorSource.getFeatures()
this.transform.setFeatures(features) // 所有要素
// 或
this.transform.setFeatures([feature1, feature2]) // 特定要素

// 清空当前变换的要素
this.transform.clear()

// 激活/停用交互
this.transform.setActive(true)  // 激活
this.transform.setActive(false) // 停用

// 设置锚点位置（默认在要素中心）
this.transform.setAnchor([x, y])