Dyomedea
/
sandbox
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Test using real tiles.

This commit is contained in:
Eric van der Vlist 2022-10-16 15:14:00 +02:00
parent adb3ceaa81
commit 0d08ff8cba
3 changed files with 27 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
svgmap/src/components/map/Tile.tsx
View File

@ -2,7 +2,6 @@ import react, { useEffect, useRef } from 'react';
import { TileKey } from './Map'; import { TileKey } from './Map';
interface TileProperties { interface TileProperties {
href?: string;
x: number; x: number;
y: number; y: number;
tileSize: number; tileSize: number;
@ -19,45 +18,31 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
}; };
useEffect(() => { useEffect(() => {
if (props.href !== undefined) { const loadImage = async () => {
const loadImage = async () => { const href = `https://tile.openstreetmap.org/${props.tileKey.zoomLevel}/${props.tileKey.x}/${props.tileKey.y}.png`;
console.log(`Pre loading: ${JSON.stringify(props.href)}`); console.log(`Pre loading: ${JSON.stringify(href)}`);
const image = new Image(props.tileSize, props.tileSize); const image = new Image(props.tileSize, props.tileSize);
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement; image.loading = 'eager';
// const image = new SVGImageElement(); // @ts-ignore
image.loading = 'eager'; image.setAttribute('href', href);
// @ts-ignore if (!image.complete) {
image.setAttribute('href', props.href); await image.decode();
if (!image.complete) { }
await image.decode(); if (props.delay !== undefined) {
} await timeout(props.delay);
if (props.delay !== undefined) { }
await timeout(props.delay); const svgImage = document.createElementNS(
} 'http://www.w3.org/2000/svg',
const svgImage = document.createElementNS( 'image'
'http://www.w3.org/2000/svg', ) as unknown as SVGImageElement;
'image' svgImage.setAttribute('width', props.tileSize.toString());
) as unknown as SVGImageElement; svgImage.setAttribute('height', props.tileSize.toString());
svgImage.setAttribute('width', props.tileSize.toString()); // @ts-ignore
svgImage.setAttribute('height', props.tileSize.toString()); svgImage.setAttribute('href', href);
// @ts-ignore g.current?.replaceChildren(svgImage);
svgImage.setAttribute('href', props.href); };
// svgImage.setAttribute('x', '0'); loadImage();
// svgImage.setAttribute('y', '0'); }, [props.delay, props.tileSize]);
g.current?.replaceChildren(svgImage);
};
loadImage();
}
}, [props.href, props.delay, props.tileSize]);
// const children = useMemo(
// () => (
// <>
// <g ref={g} transform={`translate(${props.x},${props.y})`} />
// </>
// ),
// []
// );
return ( return (
<> <>

3
svgmap/src/components/map/TiledLayer.tsx
View File

@ -94,11 +94,10 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
<Tile <Tile
key={tileKeyToString(tileKey)} key={tileKeyToString(tileKey)}
tileKey={tileKey} tileKey={tileKey}
href={fakeTile}
x={col * props.tileSize} x={col * props.tileSize}
y={row * props.tileSize} y={row * props.tileSize}
tileSize={props.tileSize} tileSize={props.tileSize}
delay={1000} delay={100}
/> />
); );
} else { } else {

2
svgmap/src/components/map/TiledLayersStack.tsx
View File

@ -49,7 +49,7 @@ const TiledLayersStack: react.FC<TiledLayersStackProperties> = (
const zoom = 2 ** (zoomLevel - safetyZoomLevels); const zoom = 2 ** (zoomLevel - safetyZoomLevels);
const currentTiledLayerKey = { const currentTiledLayerKey = {
provider: tiledLayerKey.provider, provider: tiledLayerKey.provider,
zoomLevel: zoomLevel + tiledLayerKey.zoomLevel, zoomLevel: zoomLevel -safetyZoomLevels + tiledLayerKey.zoomLevel,
x: tiledLayerKey.x * zoom, x: tiledLayerKey.x * zoom,
y: tiledLayerKey.y * zoom, y: tiledLayerKey.y * zoom,
}; };