Dyomedea
/
dyomedea
1
1
Fork 0
Code Issues 4 Pull Requests Projects 3 Releases 1 Wiki Activity

Adding scale support in the computeStateFromScope method.

This commit is contained in:
Eric van der Vlist 2022-09-14 10:26:27 +02:00
parent 4687624259
commit 2eb9a6cb47
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/store/map.ts
View File

@ -1,5 +1,5 @@
import { createSlice } from '@reduxjs/toolkit'; import { createSlice } from '@reduxjs/toolkit';
import _ from 'lodash'; import _, { round } from 'lodash';
import { tileSize } from '../components/map/tiled-map'; import { tileSize } from '../components/map/tiled-map';
import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo'; import { geoPoint, Point, lon2tile, lat2tile } from '../lib/geo';
@ -11,8 +11,8 @@ export interface MapScope {
zoom: number; zoom: number;
} }
const initialMapScope: MapScope = { const initialMapScope: MapScope = {
center: { lat: -37.8372, lon: 77.5513 }, center: { lat: -37.8403508, lon: 77.5539501 },
zoom: 13, zoom: 13.49,
}; };
// Derived properties // Derived properties
@ -66,11 +66,14 @@ const computeStateFromScope = (scope: MapScope) => {
state.scope = newScope; state.scope = newScope;
state.tiles = {} as TilesDescription; state.tiles = {} as TilesDescription;
state.slippy = {} as SlippyState; state.slippy = {} as SlippyState;
state.tiles.nb = {
x: _.ceil(window.innerWidth / tileSize + 4),
y: _.ceil(window.innerHeight / tileSize + 4),
};
state.tiles.zoom = _.round(state.scope.zoom); state.tiles.zoom = _.round(state.scope.zoom);
const softZoom = state.scope.zoom - state.tiles.zoom;
state.slippy.scale = 2 ** softZoom;
const visibleTileSize = tileSize * state.slippy.scale;
state.tiles.nb = {
x: _.ceil(window.innerWidth / visibleTileSize + 4),
y: _.ceil(window.innerHeight / visibleTileSize + 4),
};
const tilesCenter: Point = { const tilesCenter: Point = {
x: lon2tile(state.scope.center.lon, state.tiles.zoom), x: lon2tile(state.scope.center.lon, state.tiles.zoom),
y: lat2tile(state.scope.center.lat, state.tiles.zoom), y: lat2tile(state.scope.center.lat, state.tiles.zoom),
@ -84,14 +87,13 @@ const computeStateFromScope = (scope: MapScope) => {
y: window.innerHeight / 2, y: window.innerHeight / 2,
}; };
const tilesCenterActualLocation: Point = { const tilesCenterActualLocation: Point = {
x: (tilesCenter.x - state.tiles.first.x) * tileSize, x: (tilesCenter.x - state.tiles.first.x) * visibleTileSize,
y: (tilesCenter.y - state.tiles.first.y) * tileSize, y: (tilesCenter.y - state.tiles.first.y) * visibleTileSize,
}; };
state.slippy.translation = { state.slippy.translation = {
x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x, x: tilesCenterTargetLocation.x - tilesCenterActualLocation.x,
y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y, y: tilesCenterTargetLocation.y - tilesCenterActualLocation.y,
}; };
state.slippy.scale = 1;
return state; return state;
}; };
@ -105,9 +107,7 @@ const mapSlice = createSlice({
resize: (state) => { resize: (state) => {
return computeStateFromScope(state.scope); return computeStateFromScope(state.scope);
}, },
shift: (state, action) => { shift: (state, action) => {},
},
scale: (state, action) => {}, scale: (state, action) => {},
}, },
}); });