Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Memoising `<TileSet>`

This commit is contained in:
Eric van der Vlist 2022-10-30 20:23:12 +01:00
parent edca3f0d1b
commit 7322e5f5c4
1 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/map/TileSet.tsx
View File

@ -1,5 +1,5 @@
import react, { } from 'react';
import { range } from 'lodash';
import react, { memo } from 'react';
import { isEqual, range } from 'lodash';
import { Rectangle, TileKeyObject } from './types';
import tileUri from './uris';
@ -51,52 +51,53 @@ export interface TileSetProperties {
*
*
*/
export const TileSet: react.FC<TileSetProperties> = (
props: TileSetProperties
) => {
// console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
export const TileSet: react.FC<TileSetProperties> = memo(
(props: TileSetProperties) => {
// console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
const key = tileUri({
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
});
const key = tileUri({
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
});
const tiles: any = globalThis.cacheForTileSet.get(key) ?? new Map();
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.has(key)) {
tiles.set(
key,
<Tile
key={key}
keyObject={{
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: col,
y: row,
}}
/>
);
}
});
}
);
globalThis.cacheForTileSet.set(key, tiles);
}
const tiles: any = globalThis.cacheForTileSet.get(key) ?? new Map();
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.has(key)) {
tiles.set(
key,
<Tile
key={key}
keyObject={{
provider: props.keyObject.provider,
zoomLevel: props.keyObject.zoomLevel,
x: col,
y: row,
}}
/>
);
}
});
}
);
globalThis.cacheForTileSet.set(key, tiles);
}
return <>{Array.from(tiles.values())}</>;
};
return <>{Array.from(tiles.values())}</>;
},
isEqual
);
export default TileSet;