New component to manage tiled layers.

This commit is contained in:
Eric van der Vlist 2022-10-15 12:04:18 +02:00
parent 7670dce370
commit e684b6155f
2 changed files with 66 additions and 27 deletions

View File

@ -7,6 +7,7 @@ import SlippyBoard from './SlippyBoard';
import SingleTouchHandler from './SingleTouchHandler'; import SingleTouchHandler from './SingleTouchHandler';
import DoubleTouchHandler from './DoubleTouchHandler'; import DoubleTouchHandler from './DoubleTouchHandler';
import TiledLayer from './TiledLayer'; import TiledLayer from './TiledLayer';
import TiledLayerConductor from './TiledLayersConductor';
interface MapProperties { interface MapProperties {
height: number; height: number;
@ -78,38 +79,13 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
height={boardSize} height={boardSize}
fill='red' fill='red'
/> />
<TiledLayer <TiledLayerConductor
key='tile1'
height={props.height} height={props.height}
width={props.width} width={props.width}
shift={shift} shift={shift}
zoom={zoom} zoom={zoom}
layerZoom={1}
tileSize={256} tileSize={256}
nbTiles={nbTiles} key='tiled-layers'
active={zoom < 1.5}
/>
<TiledLayer
key='tile2'
height={props.height * 2}
width={props.width * 2}
shift={{ x: shift.x * 2, y: shift.y * 2 }}
zoom={zoom}
layerZoom={0.5}
tileSize={256}
nbTiles={nbTiles * 2}
active={zoom >= Math.SQRT2 && zoom < 2 * Math.SQRT2}
/>
<TiledLayer
key='tile3'
height={props.height * 4}
width={props.width * 4}
shift={{ x: shift.x * 4, y: shift.y * 4 }}
zoom={zoom}
layerZoom={0.25}
tileSize={256}
nbTiles={nbTiles * 4}
active={zoom >= 2 * Math.SQRT2}
/> />
<circle key='circle' cx='50' cy='50' r='50' />, <circle key='circle' cx='50' cy='50' r='50' />,
</> </>

View File

@ -0,0 +1,63 @@
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;