OpenLayers – Trigger Event Once Layer is Loaded

eventsopenlayers

var pixelProjection = new ol.proj.Projection({
    code: 'pixel',
    units: 'pixels',
    extent: [0, 0, width, height]
});

var layerNC = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: '../cartes/img/' + newMapFileName,
            imageSize: [width, height],
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent()
        })
    }),
    layerVG = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            url: '../cartes/img/' + oldMapFileName,
            imageSize: [width, height],
            projection: pixelProjection,
            imageExtent: pixelProjection.getExtent()
        })
    });

var map = new ol.Map({
    layers: [
        layerNC,
        layerVG
    ],
    target: 'interactiveMap',
    controls: [],
    view: new ol.View({
        projection: pixelProjection,
        center: ol.extent.getCenter(pixelProjection.getExtent()),
        zoom: 1.75,
        maxZoom: 3,
        minZoom: 0
    })
});

layerVG.on("change", function(){
    console.log("loaded");
});

I am trying to make the layer event work and I can't seem to make it fire. Even when I try with moveend, nothing seems to be working. I want to have an event fire when the image (layer) is loaded for the first time.

Best Answer

Currently, OpenLayers 3 doesn't provide a mechanism to know when sources/layers are loaded. This is planned, but not yet implemented.

In the mean time, you can use your own imageLoadFunction. In your case:

 var source = new ol.source.ImageStatic({
   url: '../cartes/img/' + newMapFileName,
   imageSize: [width, height],
   projection: pixelProjection,
   imageExtent: pixelProjection.getExtent(),
   imageLoadFunction: function(image, src) {
     var imageElement = image.getImage();
     imageElement.onload = function() {
       console.log('loaded');
     };
     imageElement.src = src;
   }
  });

I've never used this myself, and I'm hoping it works.

Note that a similar technique can also be used for tile sources. See this post on the OpenLayers 3 mailing list.

Related Question