使用GIF作为OpenLayers Map上ImageWMS的来源

Question

OpenLayers version 2 seemed to display gifs without any problem.

OpenLayers: 4.6.4 (the version that I am using now) only displays the first frame of the gif: https://prnt.sc/i5xrun

Andreas Hocevar suggested a solution to this problem ( https://github.com/openlayers/openlayers/issues/4133 ):

Use a "custom imageLoadFunction for the image source. Instead of returning the image itself, return a canvas with a frame of the gif, which you can get using third party libraries (eg http://themadcreator.github.io/gifler/docs.html#animator::createBufferCanvas() )."

I tried to use his approach but didn't manage to display the canvas on the map. Could someone either advise how to show gif on the map or how to display canvas holding that gif?

Here's the code that I used:

<script src="/js/gifler.min.js"></script>

...

var ImageSource = new ol.source.ImageWMS({
  url: 'http://weather-services.telventdtn.com/basic/wms_v1/wms.wsgi?',
  params: {
    'REQUEST'    : 'GetAnimationFile',
    'VERSION'    : '1.3.0',
    'SERVICE'    : 'WMS',
    'STYLES'     : '',
    'LAYERS'     : 'RADAR_US_CURRENT',
    'CRS'        : 'EPSG:900913',
    'BBOX'       : '-16730536.751059378,2397065.207023127,-3629841.5992064495,8198941.401981145',
    'FORMAT'     : 'image/gif',
    'WIDTH'      : '2678',
    'HEIGHT'     : '1186',
    'FRAMEDELAY' : '20',
    'TRANSPARENT': 'TRUE'
  },
  imageLoadFunction: function (image, src) {

    var client = new XMLHttpRequest();
    client.open('GET', src, true);
    client.setRequestHeader('Authorization', "Basic " + btoa("login:password"));
    client.responseType = "arraybuffer";

    client.onload = function () {

        var byteArray = new Uint8Array(this.response);
        var blob = new Blob([byteArray], {type: "image/png"});
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(blob);

        gifler(imageUrl)
            .get()
            .then(function(animator) {
                var BufferCanvas = animator.constructor.createBufferCanvas(animator._frames[0], animator.width, animator.height);
                animator.animateInCanvas(BufferCanvas);
                image.setImage(BufferCanvas);
            });
    };

    client.send();
  }
});

var Image = new ol.layer.Image({
  name: 'precip_layer',
  opacity: 0.8,
  zIndex: 1,
  source: ImageSource
});

Answer 1

The solution is in the new release of OpenLayers v4.6.5. Below is the example from their official website of how the animated WMS layer can be achieved:

https://openlayers.org/en/latest/examples/wms-time.html

Answer 2

I had some success animating gif downloaded through imageWMS (used ncWMS for this).

1. create an ImageWMS source image layer to get the animated gif from ncWMS or other WMS service that provides animated gifs.
2. Then I would use the gifuct-js.js library to unpack the gif in the ImageWMS "imageLoadFunction".
3. I then have another ImageLayer which uses an ImageCanvasSource, in which I have the canvasFunction create the canvas, which I give to the gif library functions to render on top of.

The net result is one layer to downloade the imageWMS and another layer to display it as an ImageCanvasSource. You may have to do some projection alignment, but now you can have controls to animate the gif in another layer.