Refactoring to work with any number of layers.

This commit is contained in:
Eric van der Vlist 2022-10-15 14:17:24 +02:00
parent 77bb1816d2
commit de7b8e587e
2 changed files with 32 additions and 34 deletions

View File

@ -85,6 +85,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
zoom={zoom} zoom={zoom}
tileSize={256} tileSize={256}
key='tiled-layers' key='tiled-layers'
numberOfZoomLevels={3}
/> />
<circle key='circle' cx='50' cy='50' r='50' />, <circle key='circle' cx='50' cy='50' r='50' />,
</> </>

View File

@ -12,6 +12,7 @@ interface TiledLayerConductorProperties {
shift: Point; shift: Point;
zoom: number; zoom: number;
tileSize: number; tileSize: number;
numberOfZoomLevels?: number;
} }
const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = ( const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
@ -20,44 +21,40 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
const nbTiles = const nbTiles =
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2; Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
return ( const numberOfZoomLevels =
<> props.numberOfZoomLevels === undefined
{' '} ? 1
: props.numberOfZoomLevels % 2 === 0
? props.numberOfZoomLevels + 1
: props.numberOfZoomLevels;
const layers = [];
for (let i = 0; i < numberOfZoomLevels; i++) {
layers.push(
<TiledLayer <TiledLayer
key='tile1' key={`layer${i}`}
height={props.height} height={props.height * 2 ** i}
width={props.width} width={props.width * 2 ** i}
shift={props.shift} shift={{ x: props.shift.x * 2 ** i, y: props.shift.y * 2 ** i }}
zoom={props.zoom} zoom={props.zoom}
layerZoom={1} layerZoom={2 ** -i}
tileSize={256} tileSize={256}
nbTiles={nbTiles} nbTiles={nbTiles * 2 ** i}
active={props.zoom < 1.5} active={
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)
}
/> />
<TiledLayer );
key='tile2' }
height={props.height * 2}
width={props.width * 2} return <>{layers}</>;
shift={{ x: props.shift.x * 2, y: props.shift.y * 2 }}
zoom={props.zoom}
layerZoom={0.5}
tileSize={256}
nbTiles={nbTiles * 2}
active={props.zoom >= Math.SQRT2 && props.zoom < 2 * Math.SQRT2}
/>
<TiledLayer
key='tile3'
height={props.height * 4}
width={props.width * 4}
shift={{ x: props.shift.x * 4, y: props.shift.y * 4 }}
zoom={props.zoom}
layerZoom={0.25}
tileSize={256}
nbTiles={nbTiles * 4}
active={props.zoom >= 2 * Math.SQRT2}
/>
</>
);
}; };
export default TiledLayerConductor; export default TiledLayerConductor;