64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import react from 'react';
|
|
import TiledLayer from './TiledLayer';
|
|
|
|
interface Point {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
interface TiledLayerConductorProperties {
|
|
height: number;
|
|
width: number;
|
|
shift: Point;
|
|
zoom: number;
|
|
tileSize: number;
|
|
}
|
|
|
|
const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
|
|
props: TiledLayerConductorProperties
|
|
) => {
|
|
const nbTiles =
|
|
Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
|
|
|
|
return (
|
|
<>
|
|
{' '}
|
|
<TiledLayer
|
|
key='tile1'
|
|
height={props.height}
|
|
width={props.width}
|
|
shift={props.shift}
|
|
zoom={props.zoom}
|
|
layerZoom={1}
|
|
tileSize={256}
|
|
nbTiles={nbTiles}
|
|
active={props.zoom < 1.5}
|
|
/>
|
|
<TiledLayer
|
|
key='tile2'
|
|
height={props.height * 2}
|
|
width={props.width * 2}
|
|
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;
|