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

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

@ -94,11 +94,10 @@ const TiledLayer: react.FC<TiledLayerProperties> = (
<Tile
key={tileKeyToString(tileKey)}
tileKey={tileKey}
href={fakeTile}
x={col * props.tileSize}
y={row * props.tileSize}
tileSize={props.tileSize}
delay={1000}
delay={100}
/>
);
} 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 currentTiledLayerKey = {
provider: tiledLayerKey.provider,
zoomLevel: zoomLevel + tiledLayerKey.zoomLevel,
zoomLevel: zoomLevel -safetyZoomLevels + tiledLayerKey.zoomLevel,
x: tiledLayerKey.x * zoom,
y: tiledLayerKey.y * zoom,
};