Adding scale support in the computeStateFromScope method.
This commit is contained in:
parent
4687624259
commit
2eb9a6cb47
|
@ -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) => {},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue