OpenLayers – How to Overlay a Raster

javascriptopenlayers

Through the example provided by the examples section of the OpenLayers website I was able to replicate the overlay method of an image. But when I try to add a different raster, now present in the filesystem, I can not get the same result. The format of the raster is in PNG.

I'm trying to do something like this: openaerialmap.org. Where I can overlay my own aerial images above a map (in example is OSM, but I will use Bing Maps in the beggining).

Other similar questions that did not help me:

  1. Using Custom Aerial Raster Imagery with OpenLayers 3 or 4
  2. Raster overlay in OpenLayers
  3. OpenLayers 4 adding a georeferenced image
  4. How to define layer order in Openlayers?

I'm using OpenLayers v5.3

JS code:

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {Image as ImageLayer, Tile as TileLayer} from 'ol/layer.js';
import {transform} from 'ol/proj.js';
import Static from 'ol/source/ImageStatic.js';
import OSM from 'ol/source/OSM.js';
import {register} from 'ol/proj/proj4.js';
import proj4 from 'proj4';

var imageExtent = [591338.2230843633878976, -3835585.6850060112774372, 591735.8523469158681110, -3834804.7757325535640121];

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new ImageLayer({
      source: new Static({
        url: "/img/test.png",
        crossOrigin: '',
        projection: 'EPSG:32655',
        imageExtent: imageExtent,
        imageSize: [7953,15619]
      })
    })
  ],
  target: 'map',
  view: new View({
    center: [-10997148, 4569099],
    zoom: 4
  })
});

Extent from raster was extracted from QGIS

The console shows no error and the image seems to load, but I can't find antwhere in the map.

Best Answer

You need to define the projection

  proj4.defs('EPSG:32655', '+proj=utm +zone=55 +ellps=WGS84 +datum=WGS84 +units=m +no_defs ');
  register(proj4);
Related Question