diff --git a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts index e7ccb7c9fa70b4bc304697f8d6d64a5beca9556b..63fddd60951fe9f46d1f628fbf562d7438516440 100644 --- a/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts +++ b/src/components/Map/MapViewer/MapViewerVector/MapViewerVector.types.ts @@ -10,6 +10,8 @@ export type MapConfig = { export type VerticalAlign = 'TOP' | 'MIDDLE' | 'BOTTOM'; export type HorizontalAlign = 'LEFT' | 'RIGHT' | 'CENTER' | 'END' | 'START'; +export type ScaleFunction = (resolution: number) => number; + export type OverlayBioEntityGroupedElementsType = { [id: string]: Array<OverlayBioEntityRender & { amount: number }>; }; diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts index 4e289297b127de56bb0bbda73f398ae625ef2383..658e2a5d60be8dd1a37ea817e96c4e9508dd7073 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/config/reactionsLayer/useOlMapReactionsLayer.ts @@ -195,6 +195,8 @@ export const useOlMapReactionsLayer = ({ return useMemo(() => { const vectorLayer = new VectorLayer({ source: vectorSource, + updateWhileAnimating: true, + updateWhileInteracting: true, }); vectorLayer.set('type', VECTOR_MAP_LAYER_TYPE); return vectorLayer; diff --git a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts index fab805158ec53aa81d2eefe3d88f359949f6620f..1960681dcf91164c454ee3a29eae7cdacfd1272f 100644 --- a/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts +++ b/src/components/Map/MapViewer/MapViewerVector/utils/shapes/elements/BaseMultiPolygon.ts @@ -6,6 +6,7 @@ import { MultiPolygon } from 'ol/geom'; import { UsePointToProjectionResult } from '@/utils/map/usePointToProjection'; import { HorizontalAlign, + ScaleFunction, VerticalAlign, } from '@/components/Map/MapViewer/MapViewerVector/MapViewerVector.types'; import { MapInstance } from '@/types/map'; @@ -109,6 +110,11 @@ export default abstract class BaseMultiPolygon { mapSize: MapSize; + mapExtentCache: Map<number, [number, number, number, number]> = new Map< + number, + [number, number, number, number] + >(); + constructor({ type, sboTerm, @@ -198,17 +204,24 @@ export default abstract class BaseMultiPolygon { this.feature = new Feature({ geometry: new MultiPolygon(this.polygons), zIndex: this.zIndex, - getScale: (resolution: number): number => { + getScale: ((): ScaleFunction => { const maxZoom = mapInstance?.getView().get('originalMaxZoom'); - if (maxZoom) { - const minResolution = mapInstance?.getView().getResolutionForZoom(maxZoom); + const minResolution = maxZoom + ? mapInstance?.getView().getResolutionForZoom(maxZoom) + : undefined; + + return (resolution: number): number => { if (minResolution) { return minResolution / resolution; } - } - return 1; - }, + return 1; + }; + })(), getMapExtent: (resolution: number): [number, number, number, number] | undefined => { + if (this.mapExtentCache.has(resolution)) { + return this.mapExtentCache.get(resolution); + } + const view = mapInstance?.getView(); const center = view?.getCenter(); const size = mapInstance?.getSize(); @@ -216,15 +229,19 @@ export default abstract class BaseMultiPolygon { if (!size || !center) { return undefined; } + const extentWidth = size[0] * resolution; const extentHeight = size[1] * resolution; - return [ + const extent: [number, number, number, number] = [ center[0] - extentWidth / 2, center[1] - extentHeight / 2, center[0] + extentWidth / 2, center[1] + extentHeight / 2, ]; + + this.mapExtentCache.set(resolution, extent); + return extent; }, id: this.id, complexId: this.complexId, diff --git a/src/components/Map/MapViewer/utils/useOlMap.ts b/src/components/Map/MapViewer/utils/useOlMap.ts index de917a955e022296f2099303e948114ba2d62739..68ec65bdabc7f95366cf0835ef547a515301a6ce 100644 --- a/src/components/Map/MapViewer/utils/useOlMap.ts +++ b/src/components/Map/MapViewer/utils/useOlMap.ts @@ -65,8 +65,8 @@ export const useOlMap: UseOlMap = ({ target } = {}) => { mouseWheelZoom: false, }).extend([ new MouseWheelZoom({ - duration: 0, - timeout: 20, + duration: 250, + timeout: 80, }), ]), target: target || mapRef.current, diff --git a/src/constants/map.ts b/src/constants/map.ts index 07775a8127ec329758241cb8f4d5ebad611d020b..5856c87cf9eaa8aafee6d1aed74a4e57b9b70b16 100644 --- a/src/constants/map.ts +++ b/src/constants/map.ts @@ -12,7 +12,7 @@ export const DEFAULT_CENTER_Y = 0; export const LATLNG_FALLBACK: LatLng = [0, 0]; export const EXTENT_PADDING_MULTIPLICATOR = 1; -export const ZOOM_RESCALING_FACTOR = 3; +export const ZOOM_RESCALING_FACTOR = 2; export const DEFAULT_CENTER_POINT: Point = { x: DEFAULT_CENTER_X,