Reordering layers when the zoom level is updated.

This commit is contained in:
Eric van der Vlist 2022-10-15 17:30:41 +02:00
parent de7b8e587e
commit c69c193d7e
1 changed files with 18 additions and 11 deletions

View File

@ -29,9 +29,13 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
: props.numberOfZoomLevels; : props.numberOfZoomLevels;
const layers = []; const layers = [];
const zoomLevel = Math.min(
Math.max(Math.round(Math.log2(props.zoom)), 0),
numberOfZoomLevels - 1
);
for (let i = 0; i < numberOfZoomLevels; i++) { const getTiledLayer = (i: number, isActive: boolean) => {
layers.push( return (
<TiledLayer <TiledLayer
key={`layer${i}`} key={`layer${i}`}
height={props.height * 2 ** i} height={props.height * 2 ** i}
@ -41,18 +45,21 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
layerZoom={2 ** -i} layerZoom={2 ** -i}
tileSize={256} tileSize={256}
nbTiles={nbTiles * 2 ** i} nbTiles={nbTiles * 2 ** i}
active={ active={isActive}
numberOfZoomLevels === 1
? true
: i === 0
? props.zoom < 2 ** 0.5
: i === numberOfZoomLevels - 1
? props.zoom >= 2 ** (i - 0.5)
: props.zoom < 2 ** (i + 0.5) && props.zoom >= 2 ** (i - 0.5)
}
/> />
); );
};
// First (ie last) dispay layers with less details (ascending order)
for (let i = 0; i < zoomLevel; i++) {
layers.push(getTiledLayer(i, false));
} }
// then dispay layers with more details (descending order)
for (let i = numberOfZoomLevels - 1; i > zoomLevel; i--) {
layers.push(getTiledLayer(i, false));
}
// And then, of course, the active one
layers.push(getTiledLayer(zoomLevel, true));
return <>{layers}</>; return <>{layers}</>;
}; };