[GIS] Openlayers 3 – georeferenced ImageStatic

georeferencingimageopenlayers

I am trying to display a georeferenced image (in 4326) over a Bing map in OL3. The ImageStatic is the following.

var view = new ol.View({
            center: [0, 0],
            zoom: 15,
            projection: 'EPSG:4326'
        });

var imageExtent = [26.545242858515152, 39.083929396585, 26.592433689580588, 39.11195443968136];
var imageProjection = 'EPSG:4326';    
var is = new ol.layer.Image({
                    extent: imageExtent,
                    source: new ol.source.ImageStatic({
                        url: 'test/test.tif',
                        imageExtent: imageExtent,
                        projection: imageProjection,
                        imageSize: [8869, 5267]
                    })
                });

The Bing is a usual one:

var Bing = new ol.layer.Tile({
                    source: new ol.source.BingMaps({
                        key: '...',
                        imagerySet: 'AerialWithLabels'})
                    });

and the map:

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        mousePositionControl
    ]),
    interactions: ol.interaction.defaults().extend([
        new ol.interaction.DragRotateAndZoom()
    ]),
    // Use the canvas renderer because it's currently the fastest
    target: 'map',
    view: view
});

The problem is that I cannot see the image. If it is georeferenced correctly shouldn't it be on the right area?

Best Answer

After some more digging I found out that the georeferenced image was too large. So I made tiles by using QGIS QMetaTiles plugin and accessed like this:

var is = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'test/test/{z}/{x}/{y}.png'
    })
});
Related Question