0

I need to fit the image to the geometry of the feature. this is my code (
I'm using Angular 14 and openlayers 7):

    this.map.on('click', (e) => {
      const feature = map.forEachFeatureAtPixel(e.pixel, function(feature: any){
        return feature;
      });
      
      if (feature) {
        const geometry = feature.getGeometry();
        const extent = geometry.getExtent();

        let imageLayer = new ImageLayer({
          source: new Static({
            url: "assets/rhino.jpg",
            projection: this.map.getView().getProjection(),
            imageExtent: extent,
          }),
          className: 'image'
        });

        imageLayer.setOpacity(0.5);
        this.map.addLayer(imageLayer);
      }
      
    })

The result I get with this code is:

Picture Example

but as you can see the image only fits square or rectangular geometry. How can I adjust it to other types of geometries?

SantiagoMoreno73
  • 1
  • 1
  • The OpenLayers example https://openlayers.org/en/latest/examples/layer-clipping-vector.html will also work with an Image layer https://codesandbox.io/s/layer-clipping-vector-forked-s3mq9l?file=/main.js – Mike Aug 19 '23 at 08:52
  • Or you can use this methdo https://openlayers.org/en/latest/examples/style-renderer.html – Mike Aug 19 '23 at 08:57

0 Answers0