Test using real tiles.
This commit is contained in:
parent
adb3ceaa81
commit
0d08ff8cba
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue