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 _ from 'lodash';
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 dispatch = useDispatch();
@ -22,86 +29,43 @@ const Map: react.FC<{}> = (props: {}) => {
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 (
<div>
<div style={{ height: '256px' }}>
<img
alt=''
role='presentation'
src='https://tile.openstreetmap.org/14/11720/10052.png'
style={{ width: '256px', height: '256px', opacity: 1 }}
/>
<img
alt=''
role='presentation'
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 className='tiles'>
{_.range(nbTilesY).map((iy) => (
<div key={'y' + iy} className='tilesRow'>
{_.range(nbTilesX).map((ix) => (
<Tile
key={'x' + ix + 'y' + iy}
iy={iy}
ix={ix}
x={firstTileX + ix}
y={firstTileY + iy}
zoom={mapState.scope.zoom}
/>
))}
</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 { 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<{}> = () => {
//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 { geoPoint } from '../lib/geo';
export interface MapState {
viewport: {
width: number;
height: number;
};
scope: {
center: geoPoint;
zoom: number;
};
}
const initialMapState: MapState = {
@ -12,6 +17,10 @@ const initialMapState: MapState = {
width: window.innerWidth,
height: window.innerHeight,
},
scope: {
center: { lat: -37.8372, lon: 77.5513 },
zoom: 13,
},
};
const mapSlice = createSlice({

View File

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