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