OpenLayers multiple georeferenced images

Question

I need to display specific maps over certain places. The maps are stored in image files ( JPG ) with know georeference. The rest of the view is filled by standard XYZ tiles.

In order to display 1 image ( according the documentation ), I can use

new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'myimage.jpg',
    projection: 'EPSG:3857',
    imageExtend: [486303.9778100852272473,
                  800886.4222691040486097, 
                  486822.4427326705190353, 
                  6801434.6447209259495139]
  })
})

It gives me 1 image per layer. As I have about 200 such a places on my map, I would need to create 200 layers. I believe, it will kill client's computer. Is there a way, how to display all images using 1 layer?

score 2 · Accepted Answer · answered Mar 27 '19 at 15:27

As long as the images are not reprojected there seems to be little performance overhead once all the images have been loaded. Loading all the images (or one image with different dummy parameters to break the cache and simulate different images) does very visibly take time, but that would be unavoidable however they were loaded. Here's a quick test script:

var raster_OSM = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({        
    layers: [raster_OSM],
    target: 'map',
    view: new ol.View({
        center: [0,0],
        zoom: 2
    })        
});

for (var i=0; i<20; i++) {
    for (var j=0; j<10; j++) {
        var raster_image = new ol.layer.Image({
            source: new ol.source.ImageStatic({         
                url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
                imageExtent: ol.proj.transformExtent([-170+i*15, 75-j*15, -160+i*15, 65-j*15],'EPSG:4326','EPSG:3857')
            })
        });
        map.addLayer(raster_image);
    }
}

But 200 layers reprojected from EPSG:4326 to EPSG:3857 does kill the browser:

    var raster_image = new ol.layer.Image({
        source: new ol.source.ImageStatic({         
            url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
            imageExtent: [-170+i*15, 75-j*15, -160+i*15, 65-j*15],
            projection: 'EPSG:4326'
        })
    });

If you are planning to upgrade there will be a greater performance overhead in OpenLayers 6 where each layer has its own canvas https://github.com/openlayers/openlayers/blob/master/changelog/upgrade-notes.md#olvectortile-api-changes — Mike, Mar 27 '19 at 15:52
Very nice explanation, thanks a lot. Especially the upgrade comment is very useful. — user3523426, Mar 27 '19 at 19:07

OpenLayers multiple georeferenced images

1 Answers1