OpenLayers版本2似乎显示没有任何问题的GIF。
OpenLayers：4.6.4（我现在使用的版本）只显示gif的第一帧：https://prnt.sc/i5xrun
Andreas Hocevar建议解决这个问题（https://github.com/openlayers/openlayers/issues/4133）：
使用＆＃34;自定义imageLoadFunction作为图像源。代替 返回图像本身，返回带有gif框架的画布， 您可以使用第三方库获得（例如 http://themadcreator.github.io/gifler/docs.html#animator::createBufferCanvas()）＆＃34;
我尝试使用他的方法，但没有设法在地图上显示画布。有人可以建议如何在地图上显示gif或如何显示持有该gif的画布吗？
这是我使用的代码：
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
});
{{1}}
{{1}}
答案 0 :(得分：0)
解决方案是在OpenLayers v4.6.5的新版本中。以下是其官方网站上有关如何实现动画WMS图层的示例：
答案 1 :(得分：0)
我对通过imageWMS（为此使用ncWMS）下载的gif进行了成功的动画制作。
最终结果是一层下载imageWMS，另一层将其显示为ImageCanvasSource。您可能需要进行一些投影对齐，但是现在您可以使用控件在另一个图层中对gif进行动画处理。