Feature 296: Gesamte Schweiz auch auf kleineren Laptop Bildschirmen sichtbar machen

libs/asset-viewer/src/lib/components/map-controls/zoom-control.ts

@@ -1,7 +1,7 @@
-import { fitToSwitzerland } from '@asset-sg/client-shared';
 import { Control } from 'ol/control';
 import { easeOut } from 'ol/easing';
 import View from 'ol/View';
+import { resetZoom } from '../map/map-controller';
 
 export class ZoomControl extends Control {
   zoomIn(): void {
@@ -17,7 +17,7 @@ export class ZoomControl extends Control {
     if (view == null) {
       return;
     }
-    fitToSwitzerland(view, true);
+    resetZoom(view, { isAnimated: true });
   }
 
   private changeZoom(delta: number): void {

libs/asset-viewer/src/lib/components/map/map-controller.ts

@@ -1,8 +1,9 @@
-import { featureStyles, fitToSwitzerland, makeRhombusImage, olCoordsFromLV95 } from '@asset-sg/client-shared';
+import { featureStyles, makeRhombusImage, olCoordsFromLV95, SWISS_CENTER, SWISS_EXTENT } from '@asset-sg/client-shared';
 import { isNotUndefined } from '@asset-sg/core';
 import { AssetEditDetail, getCoordsFromStudy, Study } from '@asset-sg/shared';
 import { Control } from 'ol/control';
 import { Coordinate } from 'ol/coordinate';
+import { easeOut } from 'ol/easing';
 import { containsExtent } from 'ol/extent';
 import Feature from 'ol/Feature';
 import { Geometry, LineString, Point, Polygon } from 'ol/geom';
@@ -18,6 +19,8 @@ import { distinctUntilChanged, filter, fromEventPattern, map, Observable, switch
 import { AllStudyDTO } from '../../models';
 import { wktToGeoJSON } from '../../state/asset-search/asset-search.selector';
 
+export const INITIAL_RESOLUTION = 500;
+
 export class MapController {
   private readonly map: OlMap;
 
@@ -55,10 +58,12 @@ export class MapController {
 
   constructor(element: HTMLElement) {
     const view = new View({
-      center: [900000, 5900000],
-      zoom: 9,
       projection: 'EPSG:3857',
-      minZoom: 8.5,
+      minResolution: 0.1,
+      resolution: INITIAL_RESOLUTION,
+      center: SWISS_CENTER,
+      extent: SWISS_EXTENT,
+      showFullExtent: true,
     });
 
     this.layers = this.makeLayers();
@@ -93,7 +98,6 @@ export class MapController {
 
     this.map.once('loadend', () => {
       if (this.activeAsset === null) {
-        fitToSwitzerland(view, false);
         const zoom = view.getZoom();
         if (zoom != null) {
           view.setMinZoom(zoom);
@@ -262,7 +266,7 @@ export class MapController {
     this.layers.assets.setOpacity(1);
     this.layers.studies.setOpacity(1);
     window.requestAnimationFrame(() => {
-      fitToSwitzerland(this.map.getView(), true);
+      resetZoom(this.map.getView(), { isAnimated: true });
     });
   }
 
@@ -602,3 +606,17 @@ const zoomToCenter = (map: OlMap, { center, zoom }: { center: Coordinate; zoom:
     map.getView().animate({ center, zoom, duration: 600 });
   });
 };
+
+export const resetZoom = (view: View, options: { isAnimated?: boolean } = {}): void => {
+  if (options.isAnimated) {
+    view.animate({
+      resolution: INITIAL_RESOLUTION,
+      center: SWISS_CENTER,
+      duration: 250,
+      easing: easeOut,
+    });
+  } else {
+    view.setResolution(INITIAL_RESOLUTION);
+    view.setCenter(SWISS_CENTER);
+  }
+};

libs/client-shared/src/lib/utils/map.ts

@@ -5,21 +5,27 @@ import { pipe } from 'fp-ts/function';
 import * as NEA from 'fp-ts/NonEmptyArray';
 import * as O from 'fp-ts/Option';
 import { Coordinate } from 'ol/coordinate';
-import { easeOut } from 'ol/easing';
-import { Extent } from 'ol/extent';
+import * as Extent from 'ol/extent';
 import Feature from 'ol/Feature';
 import { LineString, Point, Polygon, SimpleGeometry } from 'ol/geom';
 import { fromExtent as polygonFromExtent } from 'ol/geom/Polygon';
 import Map from 'ol/Map';
-import { fromLonLat } from 'ol/proj';
+import { fromLonLat, transform } from 'ol/proj';
+import { register } from 'ol/proj/proj4';
 import { Circle, Fill, RegularShape, Stroke, Style } from 'ol/style';
-import View from 'ol/View';
 
+import proj4 from 'proj4';
 import { isoWGSLat, isoWGSLng } from '../models';
 import { WindowService } from '../services';
 
 import { lv95ToWGS } from './wgs';
 
+proj4.defs(
+  'EPSG:2056',
+  '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=2600000 +y_0=1200000 +ellps=bessel +towgs84=674.374,15.056,405.346,0,0,0,0 +units=m +no_defs'
+);
+register(proj4);
+
 export const createFeaturesFromStudy = (
   study: Study,
   featureStyles: { point: Style; polygon: Style; lineString: Style }
@@ -232,7 +238,7 @@ export const zoomToStudies = (
   }
 };
 
-const findExtentFromPoints = (coords: NEA.NonEmptyArray<Coordinate>): Extent =>
+const findExtentFromPoints = (coords: NEA.NonEmptyArray<Coordinate>): Extent.Extent =>
   pipe(
     coords,
     A.reduce(
@@ -247,17 +253,14 @@ const findExtentFromPoints = (coords: NEA.NonEmptyArray<Coordinate>): Extent =>
     ({ minX, maxX, minY, maxY }) => [minX, minY, maxX, maxY]
   );
 
-export const fitToSwitzerland = (view: View, withAnimation: boolean) => {
-  view.fit(
-    new Polygon([
-      [
-        [662739.4642028128, 6075958.039112476],
-        [658764.7387319836, 5748807.558051921],
-        [1176090.5461660565, 5747278.817486218],
-        [1172115.8206952275, 6079321.268357024],
-        [662739.4642028128, 6075958.039112476],
-      ],
-    ]),
-    withAnimation ? { duration: 250, easing: easeOut } : {}
-  );
+const getSwissExtent = (): Extent.Extent => {
+  const [minX, minY] = transform([2420000, 1030000], 'EPSG:2056', 'EPSG:3857');
+  const [maxX, maxY] = transform([2900000, 1350000], 'EPSG:2056', 'EPSG:3857');
+  return [minX, minY, maxX, maxY];
 };
+
+export const SWISS_EXTENT = getSwissExtent();
+export const SWISS_CENTER = [
+  (SWISS_EXTENT[2] - SWISS_EXTENT[0]) / 2 + SWISS_EXTENT[0],
+  (SWISS_EXTENT[3] - SWISS_EXTENT[1]) / 2 + SWISS_EXTENT[1],
+];

tsconfig.base.json

@@ -13,6 +13,7 @@
     "lib": ["es2020", "dom"],
     "skipLibCheck": true,
     "skipDefaultLibCheck": true,
+    "allowSyntheticDefaultImports": true,
     "baseUrl": ".",
     "paths": {
       "@asset-sg/admin": ["libs/admin/src/index.ts"],