Using tiles.

This commit is contained in:
Eric van der Vlist 2022-09-12 16:45:27 +02:00
parent c4bd74a598
commit fd79fba51f
7 changed files with 136 additions and 99 deletions

View File

@ -2,6 +2,13 @@ import react, { useMemo, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import _ from 'lodash'; import _ from 'lodash';
import { MapState, mapActions } from '../../store/map'; import { MapState, mapActions } from '../../store/map';
import { slippyActions } from '../../store/slippy';
import { lat2tile, lon2tile } from '../../lib/geo';
import Tile from './tile';
import '../../theme/map.css';
export const tileSize = 256;
const Map: react.FC<{}> = (props: {}) => { const Map: react.FC<{}> = (props: {}) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -22,86 +29,43 @@ const Map: react.FC<{}> = (props: {}) => {
window.addEventListener('resize', debouncedResizeHandler); window.addEventListener('resize', debouncedResizeHandler);
}, []); }, []);
const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 3;
const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 3;
const [tileCenterY, reminderY] = lat2tile(
mapState.scope.center.lat,
mapState.scope.zoom
);
const [tileCenterX, reminderX] = lon2tile(
mapState.scope.center.lon,
mapState.scope.zoom
);
const firstTileY = tileCenterY - _.round(nbTilesY / 2);
const firstTileX = tileCenterX - _.round(nbTilesX / 2);
const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
const targetLocationY = mapState.viewport.height / 2;
const targetLocationX = mapState.viewport.width / 2;
const deltaY = targetLocationY - locationY;
const deltaX = targetLocationX - locationX;
dispatch(slippyActions.set({ scale: 1, translation: { x: deltaX, y: deltaY } }));
return ( return (
<div> <div className='tiles'>
<div style={{ height: '256px' }}> {_.range(nbTilesY).map((iy) => (
<img <div key={'y' + iy} className='tilesRow'>
alt='' {_.range(nbTilesX).map((ix) => (
role='presentation' <Tile
src='https://tile.openstreetmap.org/14/11720/10052.png' key={'x' + ix + 'y' + iy}
style={{ width: '256px', height: '256px', opacity: 1 }} iy={iy}
/> ix={ix}
<img x={firstTileX + ix}
alt='' y={firstTileY + iy}
role='presentation' zoom={mapState.scope.zoom}
src='https://tile.openstreetmap.org/14/11721/10052.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11722/10052.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11723/10052.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
</div>
<div style={{ height: '256px' }}>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11720/10053.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11721/10053.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11722/10053.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11723/10053.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
</div>
<div style={{ height: '256px' }}>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11720/10054.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11721/10054.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11722/10054.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11723/10054.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/> />
))}
</div> </div>
))}
</div> </div>
); );
}; };

View File

@ -0,0 +1,29 @@
import React from 'react';
import { tileSize } from './map';
const tileProvider = (zoom: number, x: number, y: number) =>
'https://tile.openstreetmap.org/' + zoom + '/' + x + '/' + y + '.png';
const Tile: React.FC<{
ix: number;
iy: number;
x: number;
y: number;
zoom: number;
}> = (props: {
ix: number;
iy: number;
x: number;
y: number;
zoom: number;
}) => {
return (
<img
src={tileProvider(props.zoom, props.x, props.y)}
className='tile'
alt=''
/>
);
};
export default Tile;

View File

@ -9,21 +9,6 @@ import WheelHandler from './wheel-handler';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { MapState } from '../../store/map'; import { MapState } from '../../store/map';
export interface Point {
x: number;
y: number;
}
export interface Translation {
translate: Point;
}
export interface Scale {
scale: {
center: Point;
factor: number;
};
}
const Slippy: react.FC<{}> = () => { const Slippy: react.FC<{}> = () => {
//console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`); //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);

38
src/lib/geo.ts Normal file
View File

@ -0,0 +1,38 @@
export interface Point {
x: number;
y: number;
}
export interface geoPoint {
lon: number;
lat: number;
}
// cf https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames#ECMAScript_(JavaScript/ActionScript,_etc.)
export const lon2tile = (lon: number, zoom: number) => {
const real = ((lon + 180) / 360) * Math.pow(2, zoom);
const floor = Math.floor(real);
return [floor, real - floor];
};
export const lat2tile = (lat: number, zoom: number) => {
const real =
((1 -
Math.log(
Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
) /
Math.PI) /
2) *
Math.pow(2, zoom);
const floor = Math.floor(real);
return [floor, real - floor];
};
export function tile2long(x: number, z: number) {
return (x / Math.pow(2, z)) * 360 - 180;
}
export function tile2lat(y: number, z: number) {
var n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
}

View File

@ -1,10 +1,15 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { geoPoint } from '../lib/geo';
export interface MapState { export interface MapState {
viewport: { viewport: {
width: number; width: number;
height: number; height: number;
}; };
scope: {
center: geoPoint;
zoom: number;
};
} }
const initialMapState: MapState = { const initialMapState: MapState = {
@ -12,6 +17,10 @@ const initialMapState: MapState = {
width: window.innerWidth, width: window.innerWidth,
height: window.innerHeight, height: window.innerHeight,
}, },
scope: {
center: { lat: -37.8372, lon: 77.5513 },
zoom: 13,
},
}; };
const mapSlice = createSlice({ const mapSlice = createSlice({

View File

@ -1,6 +1,7 @@
import { actionSheetController } from '@ionic/core';
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import { Point } from '../components/slippy/slippy'; import { Point } from '../lib/geo';
export interface SlippyState { export interface SlippyState {
scale: number; scale: number;
@ -16,7 +17,7 @@ const slippySlice = createSlice({
name: 'slippy', name: 'slippy',
initialState: initialSlippyState, initialState: initialSlippyState,
reducers: { reducers: {
scale(state, action) { scale: (state, action) => {
console.log(`redux scale: ${JSON.stringify(action.payload)}`); console.log(`redux scale: ${JSON.stringify(action.payload)}`);
state.scale = state.scale * action.payload.factor; state.scale = state.scale * action.payload.factor;
state.translation.x = state.translation.x =
@ -28,11 +29,14 @@ const slippySlice = createSlice({
(state.translation.y - action.payload.center.y) * (state.translation.y - action.payload.center.y) *
(action.payload.factor - 1); (action.payload.factor - 1);
}, },
translate(state, action) { translate: (state, action) => {
console.log(`redux translate: action=${JSON.stringify(action)}`); console.log(`redux translate: action=${JSON.stringify(action)}`);
state.translation.x = state.translation.x + action.payload.x; state.translation.x = state.translation.x + action.payload.x;
state.translation.y = state.translation.y + action.payload.y; state.translation.y = state.translation.y + action.payload.y;
}, },
set: (state, action) => {
return action.payload;
},
}, },
}); });

8
src/theme/map.css Normal file
View File

@ -0,0 +1,8 @@
.tilesRow {
height: 256px;
}
.tile {
height: 256px;
width: 256px;
}