Humorloos / bouldern-app

1 stars 1 forks source link

Forbid rotation while zooming #298

Open Humorloos opened 2 years ago

Humorloos commented 2 years ago

See https://stackoverflow.com/questions/71113494/openlayers-prevent-pinch-rotate-during-pinch-zoom

implementation mentioned in question:

Index: frontend/src/views/GymMap.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/frontend/src/views/GymMap.vue b/frontend/src/views/GymMap.vue
--- a/frontend/src/views/GymMap.vue (revision dc6b1b6253a9e3c217fa312e5a7588f0fae981f6)
+++ b/frontend/src/views/GymMap.vue (date 1644851612175)
@@ -168,7 +168,7 @@
 import {Collection} from 'ol';
 import {containsCoordinate, getCenter} from 'ol/extent';
 import {GeoJSON} from 'ol/format';
-import {Draw} from 'ol/interaction';
+import {Draw, PinchRotate} from 'ol/interaction';
 import {Image as ImageLayer, Vector as VectorLayer} from 'ol/layer';
 import Map from 'ol/Map';
 import {Projection} from 'ol/proj';
@@ -207,6 +207,10 @@
     const map = new Map({
       moveTolerance: 4,
     });
+    const interactions = map.getInteractions().getArray();
+    const pinchRotate = interactions
+        .filter((interaction) => interaction instanceof PinchRotate)[0];
+
     // Mount map and popover
     watchPostEffect(() => {
       if (mapRoot.value !== null) map.setTarget(mapRoot.value);
@@ -501,12 +505,16 @@
             imageLayer.value,
             vectorLayer,
           ]);
-          map.setView(new View({
+          const view = new View({
             projection: projection.value,
             center: getCenter(extent),
             zoom: 1,
             maxZoom: 8,
-          }));
+          });
+          view.on('change:resolution', () => {
+            pinchRotate.setActive(false);
+          });
+          map.setView(view);
           if (onLoaded) onLoaded();
         };
       });
@@ -764,6 +772,9 @@
         const hit = hasBoulderAtPixel(pixel);
         map.getTarget().style.cursor = hit ? 'pointer' : '';
       });
+      map.on('moveend', () => {
+        pinchRotate.setActive(true);
+      });
       loaded.value = true;
     }
Humorloos commented 2 years ago

Maybe it's possible to implement this simlar to the modify interaction: certain zoom triggers zooming property, which is disabled afterwards?