Checking zoom and tiles boundaries (#6)

This commit is contained in:
Eric van der Vlist 2022-09-27 15:10:23 +02:00
parent ac67a063c2
commit f5ce103cb3
2 changed files with 29 additions and 10 deletions

View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { MapState } from '../../store/map'; import { MapState } from '../../store/map';
@ -116,13 +116,21 @@ const Tile: React.FC<{
(state: { map: MapState }) => state.map.scope.tileProvider (state: { map: MapState }) => state.map.scope.tileProvider
) as keyof typeof tileProviders; ) as keyof typeof tileProviders;
return ( const x = props.x % 2 ** props.zoom;
<img const canRender = props.y >= 0 && props.y <= 2 ** props.zoom - 1;
src={tileProviders[tileProvider].getTileUrl(props.zoom, props.x, props.y)}
className='tile' if (canRender) {
alt='' return (
/> canRender && (
); <img
src={tileProviders[tileProvider].getTileUrl(props.zoom, x, props.y)}
className='tile'
alt=''
/>
)
);
}
return <Fragment />;
}; };
export default Tile; export default Tile;

View File

@ -1,5 +1,6 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import _ from 'lodash'; import _ from 'lodash';
import { tileProviders } from '../components/map/tile';
import { tileSize } from '../components/map/tiled-map'; import { tileSize } from '../components/map/tiled-map';
import { import {
geoPoint, geoPoint,
@ -121,6 +122,13 @@ const evaluateWhiteboardViewBox = (
export const evaluateStateFromScope = (state: MapState) => { export const evaluateStateFromScope = (state: MapState) => {
console.log('<<<<<<<<<<<< evaluateStateFromScope'); console.log('<<<<<<<<<<<< evaluateStateFromScope');
state.tiles.zoom = _.round(state.scope.zoom); state.tiles.zoom = _.round(state.scope.zoom);
if (state.tiles.zoom < tileProviders[state.scope.tileProvider].minZoom) {
state.tiles.zoom = tileProviders[state.scope.tileProvider].minZoom;
}
if (state.tiles.zoom > tileProviders[state.scope.tileProvider].maxZoom) {
state.tiles.zoom = tileProviders[state.scope.tileProvider].maxZoom;
}
const softZoom = state.scope.zoom - state.tiles.zoom; const softZoom = state.scope.zoom - state.tiles.zoom;
state.slippy.scale = 2 ** softZoom; state.slippy.scale = 2 ** softZoom;
@ -186,8 +194,11 @@ export const reevaluateState = (state: MapState) => {
(state.tiles.nb.x - 1) * visibleTileSize - window.innerWidth || (state.tiles.nb.x - 1) * visibleTileSize - window.innerWidth ||
-state.slippy.translation.y > -state.slippy.translation.y >
(state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight || (state.tiles.nb.y - 1) * visibleTileSize - window.innerHeight ||
state.slippy.scale > Math.SQRT2 || (state.slippy.scale > Math.SQRT2 &&
state.slippy.scale < Math.SQRT1_2 state.tiles.zoom + 1 <=
tileProviders[state.scope.tileProvider].maxZoom) ||
(state.slippy.scale < Math.SQRT1_2 &&
state.tiles.zoom - 1 >= tileProviders[state.scope.tileProvider].minZoom)
) { ) {
evaluateStateFromScope(state); evaluateStateFromScope(state);
} else { } else {