Refactoring to work with any number of layers.
This commit is contained in:
parent
77bb1816d2
commit
de7b8e587e
|
@ -85,6 +85,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
|
|||
zoom={zoom}
|
||||
tileSize={256}
|
||||
key='tiled-layers'
|
||||
numberOfZoomLevels={3}
|
||||
/>
|
||||
<circle key='circle' cx='50' cy='50' r='50' />,
|
||||
</>
|
||||
|
|
|
@ -12,6 +12,7 @@ interface TiledLayerConductorProperties {
|
|||
shift: Point;
|
||||
zoom: number;
|
||||
tileSize: number;
|
||||
numberOfZoomLevels?: number;
|
||||
}
|
||||
|
||||
const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
|
||||
|
@ -20,44 +21,40 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
|
|||
const nbTiles =
|
||||
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
|
||||
key='tile1'
|
||||
height={props.height}
|
||||
width={props.width}
|
||||
shift={props.shift}
|
||||
key={`layer${i}`}
|
||||
height={props.height * 2 ** i}
|
||||
width={props.width * 2 ** i}
|
||||
shift={{ x: props.shift.x * 2 ** i, y: props.shift.y * 2 ** i }}
|
||||
zoom={props.zoom}
|
||||
layerZoom={1}
|
||||
layerZoom={2 ** -i}
|
||||
tileSize={256}
|
||||
nbTiles={nbTiles}
|
||||
active={props.zoom < 1.5}
|
||||
nbTiles={nbTiles * 2 ** i}
|
||||
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}
|
||||
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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <>{layers}</>;
|
||||
};
|
||||
|
||||
export default TiledLayerConductor;
|
||||
|
|
Loading…
Reference in New Issue