0

I'm currently working a project where to solve the requirements, I've added an static image as an ImageLayer, and generated an projecting on this to create logical coordinates for the end user.

My code for the map and initial layer looks like this (please note that i'm using Angular):

    private createMap(id): OlMap {
      const extent = [0, 0, 160, 160];
      const projection = new Projection({
        code: 'FPT 5th Floor',
        units: 'pixels',
        extent
      });

      const map = new OlMap({
        layers: [
          new ImageLayer({
            source: new Static({
              url: '/assets/t5-testing-Model.png',
              projection,
              imageExtent: extent,
              rotation: 1.54
            }),
          }),
        ],
        target: id,
        view: new OlView({
          projection,
          center: getCenter(extent),
          zoom: 2,
          maxZoom: 8,
        })
      });

      return map;
    }


    public getMap() {
      const id = 'map';

      if (!this.map[id]) {
        this.map[id] = this.createMap(id);
      }
      return this.map[id];
    }

This perfectly out of the box, and my map looks like this:

image

But when i rotate, my vector layers stay on the correct coordinates. But the imagelayer is skewed:

image

How would i go ahead with correcting this?

Mike
  • 16,042
  • 2
  • 14
  • 30
Koronag
  • 157
  • 1
  • 15
  • 1
    If you rotate the view both layers should rotate with it. How are you displaying the vector layer? – Mike Dec 10 '19 at 10:32
  • @Mike just create very simple VectorLayers such as this: `const vectorSource = new VectorSource({ features: this.zoneFeatures }); const zoneLayer = new VectorLayer({ source: vectorSource, name: 'mapZones' }); map.addLayer(zoneLayer);` – Koronag Dec 11 '19 at 01:02

0 Answers0