如何在地图上添加图像层并根据用户交互缩放图像

Question

我想允许用户浏览图像。一旦图像在地图上，我希望用户根据openlayer6中所需的形状来调整或缩放浏览的图像。 目前，我可以将图像添加到地图图层上，但是我无法使该图像重新由用户调整大小，以使用户能够将其放置在地图上。

请找到附带的代码（角度8）：

    public readonly map: Map;
    public  layer: any;
    public  feature: any;
    public imgLayer: any;
    public coordinate: any;
    public  geometry: any;
    public interactions: any;
    public vectorLayer: VectorLayer;

    /**
    * Initialise the map.
    * @param view View with initial center and zoom.
    */
    constructor(view: { zoom: number; center: [number, number]; } = { zoom: 2, center: [0, 0] }) {
    public imgSource: any;
    this.layer = new TileLayer({
      source: new OSM()
    });
    this.imgSource = new VectorSource();
    this.imgLayer = new VectorLayer({
      // extent: [0, 0, 4000, 3000],
      source: this.imgSource ,
       style: this.imgStyle
      // ,
      // rotation: Math.PI / 6
    });
    this.coordinate = transform(
      [-108.02111111, 38.79471747],
      'EPSG:4326',
      'EPSG:3857'
    );
    this.geometry = new Point(this.coordinate)
    this.feature = new Feature();

    this.feature.set('url', 'https://upload.wikimedia.org/wikipedia/commons/2/28/JPG_Test.jpg');
    this.feature.setGeometry(this.geometry);
    this.imgSource.addFeature(this.feature);
    this.map = new Map({
      target: 'map-container',
      view: new View({
        center: this.coordinate,
        zoom: 17
      })
    });
    this.map.addLayer(this.layer);
    this.map.addLayer(this.imgLayer);

    this.vectorLayer = new VectorLayer({
      name: 'Vecteur',
      source: new  VectorSource({ features: new Collection() }),
      style: this.getStyle
    })
    this.map.addLayer(this.vectorLayer);
    this.vectorLayer.getSource().addFeature(new  Feature(new  Polygon([
      [[400000, 5600000], [680000, 5710000], [690000, 6140000], [420000, 6180000],[400000, 5600000]],
      [[500000, 5750000], [520000, 6000000], [580000, 5900000], [500000, 5750000]]
    ])));

    this.interactions = {
      draw: new Draw({
        source: this.imgLayer.getSource(),
        type: 'LineString'
      }),
      modify: new  Modify ({
        source: this.imgLayer.getSource(),
        // insertVertexCondition: function(){ return false; }
      })
    };
    // tslint:disable-next-line:forin
    for (const i in this.interactions) {
      this.map.addInteraction(this.interactions[i]);
    }

    this.setInteraction();
    this.map.addInteraction(new Snap({
      source: this.imgSource.getSource(),
      pixelTolerance: 5
    }));

    }

    setInteraction(){
    // tslint:disable-next-line:forin
    for (let i in this.interactions) {
      this.interactions[i].set('active', true);
    }
    }
    imgStyle(feature, resolution) {
      const url = feature.get('url');
      const scale = 0.6 / resolution;
      return new Style({
        image: new Icon({
          scale,
          src: url,
          rotation: 10.54
        })
      });
    }
    // Style function
    getStyle(f) {
    return [
      new  Style({
        stroke: new  Style.Stroke({ color: '#ffcc33', width: 2 }),
        fill: new Style.Fill({ color: [255, 255, 255, .5] })
      }),
      new Style({
        image: Style.RegularShape({ radius: 4, points: 4, fill: new Style.Fill({ color: '#f00' }) })
      })
    ];
    }

问候 拉梅什（Ramesh Shivakumar）