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

25
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,15 +18,13 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
}; };
useEffect(() => { useEffect(() => {
if (props.href !== undefined) {
const loadImage = async () => { const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`); 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); 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'; image.loading = 'eager';
// @ts-ignore // @ts-ignore
image.setAttribute('href', props.href); image.setAttribute('href', href);
if (!image.complete) { if (!image.complete) {
await image.decode(); await image.decode();
} }
@ -41,23 +38,11 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
svgImage.setAttribute('width', props.tileSize.toString()); svgImage.setAttribute('width', props.tileSize.toString());
svgImage.setAttribute('height', props.tileSize.toString()); svgImage.setAttribute('height', props.tileSize.toString());
// @ts-ignore // @ts-ignore
svgImage.setAttribute('href', props.href); svgImage.setAttribute('href', href);
// svgImage.setAttribute('x', '0');
// svgImage.setAttribute('y', '0');
g.current?.replaceChildren(svgImage); g.current?.replaceChildren(svgImage);
}; };
loadImage(); loadImage();
} }, [props.delay, props.tileSize]);
}, [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,
}; };