I have some png's (transparent radar images) that I want to show as an imagelayer. Had no problem doing so........I loaded an image, than removed it, loaded a new one, removed it and so on..... But by doing it this way the transitions are not smooth (more like flickering images) like I would have hoped. How can I make these smooth??
var center = ol.proj.transform([5.2, 52.443], 'EPSG:4326', 'EPSG:3857');
var map = new ol.Map({
target: 'map',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: true
})
}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new ol.View({
center: center,
zoom: 6
})
});
var url = url of transparent radarimage (http://......)
var imageBounds = [0.813 , 50.520 , 10.996, 54.295 ];
var imageLayer = new ol.layer.Image({
opacity: opacity,
source: new ol.source.ImageStatic({
url: url,
imageSize: [1315, 799],
projection: map.getView().getProjection(),
imageExtent: ol.extent.applyTransform(imageBounds, ol.proj.getTransform("EPSG:4326", "EPSG:3857"))
})
});
map.addLayer(imageLayer); // to add imageLayer to the map.
map.removeLayer(imageLayer); // to remove imageLayer from the map.
EDIT 2: tried, as suggested (thx!), to update the source using:
s = new ol.source.Image({
source: new ol.source.ImageStatic({
url: url
})
});
l=map.getLayers().getArray()[1]; // 1 = Radar layer
l.setSource(s);
Layers are not being refreshed.......