dyomedea/src/components/map/TiledLayer.tsx

74 lines
2.3 KiB
TypeScript
Raw Normal View History

import react, { memo, useRef } from 'react';
import { range, isEqual } from 'lodash';
2022-10-17 10:04:25 +00:00
2022-10-17 16:17:13 +00:00
import { Rectangle, TileFactory, TileKeyObject } from './types';
2022-10-17 15:15:24 +00:00
import tileUri from './uris';
2022-10-17 10:04:25 +00:00
export interface TiledLayerProperties {
/** The key of the first (ie top/left) tile */
2022-10-17 11:47:35 +00:00
keyObject: TileKeyObject;
/** The current viewport expressed in tiles coordinates */
viewPort?: Rectangle;
2022-10-17 16:17:13 +00:00
/** The factory to create tiles */
tileFactory: TileFactory;
2022-10-17 10:04:25 +00:00
}
/**
2022-10-17 15:48:30 +00:00
* A lazily loaded layer of tiles.
2022-10-17 11:47:35 +00:00
*
* This component is rather dumb and is mainly a sparse array of tiles.
2022-10-17 15:48:30 +00:00
*
2022-10-17 11:47:35 +00:00
* New tiles are added to the array when the viewport is updated and they stay in the array until
* the component is destroyed.
2022-10-17 10:04:25 +00:00
*
2022-10-17 15:48:30 +00:00
* This component has no need to know the number nor the size of its tiles: tiles can be added when needed and
* its unit is the tile size (the parent component needs to transform its enclosing SVG group to adapt its units)
*
* TODO: test tiles'X and Y boundaries.
* TODO: housekeeping
* TODO: remove tileFactory to facilitate memoisation.
2022-10-17 15:48:30 +00:00
*
2022-10-17 10:04:25 +00:00
*/
export const TiledLayer: react.FC<TiledLayerProperties> = memo(
(props: TiledLayerProperties) => {
console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const tiles = useRef<any>(new Map());
2022-10-17 15:15:24 +00:00
if (props.viewPort !== undefined) {
range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).forEach(
(row) => {
range(
props.viewPort!.topLeft.x,
props.viewPort!.bottomRight.x + 1
).forEach((col) => {
const keyObject = {
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: props.keyObject.x + col,
y: props.keyObject.y + row,
};
const key = tileUri(keyObject);
if (!tiles.current.has(key)) {
tiles.current.set(
key,
<g key={key} transform={`translate(${col}, ${row})`}>
{props.tileFactory(keyObject)}
</g>
);
}
});
}
);
}
2022-10-17 15:15:24 +00:00
return <>{Array.from(tiles.current.values())}</>;
},
(prevProps, nextProps) =>
isEqual(
[prevProps.keyObject, prevProps.viewPort],
[nextProps.keyObject, nextProps.viewPort]
)
);
2022-10-17 10:04:25 +00:00
export default TiledLayer;