disable animation
shinnobi opened this issue · 6 comments
Hi !
i need to load multiple file tiff (24 file) then i play it (with interval 2s then next to next tiff )
my approach is:
- try pre-loading 24 tiff file to GeoRasterLayer
- then add/remove layers to the map when event interval
it's work so good but there is some animation when add new layer, how can stop it,
///add to georasterlayer
var layer = new GeoRasterLayer({
pane: isRadar ? "pane460" : "pane450",
georaster: georaster,
opacity: 1,
pixelValuesToColorFn: function (pixelValues) {
var pixelValue = pixelValues[0]; // there's just one band in this raster
if (pixelValue === 0 || pixelValue === -999.0) return null;
var color = isRadar
? radar(pixelValue).hex()
: satellite(pixelValue).hex();
return color;
},
resolution: 256,
});
return { filename: filename, layer: layer };
}
////add to layer group
this.sateLayer.clearLayers();
this.radarLayerGroup.clearLayers();
if (satelliteLayer.layer) {
satelliteLayer.layer.addTo(this.sateLayer);
satelliteLayer.layer.setZIndex(1);
}
hi, @shinnobi . unfortunately, I'm not sure I can be of much help, but I'll do my best! Have you tried using a custom pane and then hiding/showing the map pane? It might help avoid some of the animation you are referencing. I'm not sure though. Here's some information about custom panes:
https://leafletjs.com/examples/map-panes/
@DanielJDufour Thank you for your answer i just provide example gif. When i click to layer control i want this layer only show when fully load ( disable animation)
Hi, @shinnobi . Thank you for the extra details. I think I understand your problem now. Unfortunately, I don't have a clear solution to this issue. GeoRasterLayer is built on top of Leaflet's GridLayer and thus the mental model is about creating and displaying tiles as they are available. However, I love hacky workarounds, so let's try!
You might be able to pass in a really large tile size when creating GeoRasterLayer. This will essentially represent one view of the map with one tile. For example:
new GeoRasterLayer({ georaster, tileSize: 256 * 4 })
Does that work for your use case?
Here's link to the Leaflet Documentation on tileSize: https://leafletjs.com/reference.html#gridlayer-tilesize
@DanielJDufour thanks you for your solution, setting larger title size makes animation not showing but it makes my layer so terrible :(
Increasing the resolution works to remove the blockiness that appears with larger tiles, but then rendering may become slow.