Merge pull request #841 from geoadmin/feat-PB-490-move-zoom-buttons-i…

…n-3d PB-490: move 3d zoom buttons to right toolbox
geoadmin · May 30, 2024 · 92426c1 · 92426c1
2 parents 814f12e + b2a8461
commit 92426c1
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 107 deletions.
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
@@ -68,15 +68,18 @@
             <FeatureList />
         </CesiumPopover>
         <CesiumGeolocationFeedback v-if="viewerCreated" />
-        <CesiumToolbox
-            v-if="viewerCreated && isDesktopMode && !isFullScreenMode"
-            class="cesium-toolbox position-absolute start-50 translate-middle-x"
+
+        <cesium-compass
+            v-show="isDesktopMode && !isFullScreenMode"
+            ref="compass"
+            class="position-absolute start-50 translate-middle-x cesium-compass"
         />
         <slot />
     </div>
 </template>
 <script>
 import 'cesium/Build/Cesium/Widgets/widgets.css'
+import '@geoblocks/cesium-compass'
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import * as cesium from 'cesium'
@@ -119,7 +122,6 @@ import FeatureList from '@/modules/infobox/components/FeatureList.vue'
 import CesiumGeolocationFeedback from '@/modules/map/components/cesium/CesiumGeolocationFeedback.vue'
 import CesiumInternalLayer from '@/modules/map/components/cesium/CesiumInternalLayer.vue'
 import CesiumPopover from '@/modules/map/components/cesium/CesiumPopover.vue'
-import CesiumToolbox from '@/modules/map/components/cesium/CesiumToolbox.vue'
 import {
     CAMERA_MAX_PITCH,
     CAMERA_MAX_ZOOM_DISTANCE,
@@ -144,11 +146,9 @@ import { identifyGeoJSONFeatureAt } from '@/utils/identifyOnVectorLayer'
 import log from '@/utils/logging'
 
 const dispatcher = { dispatcher: 'CesiumMap.vue' }
-
 export default {
     components: {
         CesiumGeolocationFeedback,
-        CesiumToolbox,
         FontAwesomeIcon,
         CesiumPopover,
         FeatureEdit,
@@ -400,6 +400,11 @@ export default {
                 limitCameraPitchRoll(CAMERA_MIN_PITCH, CAMERA_MAX_PITCH, 0.0, 0.0)
             )
 
+            if (this.$refs.compass) {
+                this.$refs.compass.scene = this.viewer.scene
+                this.$refs.compass.clock = this.viewer.clock
+            }
+
             this.flyToPosition()
 
             if (this.selectedFeatures.length > 0) {
@@ -490,7 +495,7 @@ export default {
             })
         },
         getCoordinateAtScreenCoordinate(x, y) {
-            const cartesian = this.viewer.scene.pickPosition(new Cartesian2(x, y))
+            const cartesian = this.viewer?.scene.pickPosition(new Cartesian2(x, y))
             let coordinates = []
             if (cartesian) {
                 const cartCoords = Cartographic.fromCartesian(cartesian)
@@ -639,8 +644,16 @@ export default {
     right: unset;
 }
 
-.cesium-toolbox {
+.cesium-compass {
     bottom: calc($footer-height + $screen-padding-for-ui-elements);
     z-index: $zindex-map + 1;
+
+    $compass-size: 95px;
+
+    position: relative;
+    width: $compass-size;
+    height: $compass-size;
+    --cesium-compass-stroke-color: rgba(0, 0, 0, 0.6);
+    --cesium-compass-fill-color: rgb(224, 225, 226);
 }
 </style>
diff --git a/src/modules/map/components/cesium/CesiumToolbox.vue b/src/modules/map/components/cesium/CesiumToolbox.vue
diff --git a/src/modules/map/components/toolbox/MapToolbox.vue b/src/modules/map/components/toolbox/MapToolbox.vue
@@ -51,7 +51,7 @@ const is3dActive = computed(() => store.state.cesium.active)
     >
         <FullScreenButton v-if="fullScreenButton" />
         <GeolocButton v-if="geolocButton && !isFullscreenMode" />
-        <ZoomButtons v-if="!isFullscreenMode && !is3dActive" />
+        <ZoomButtons v-if="!isFullscreenMode" />
         <Toggle3dButton v-if="toggle3dButton && !isFullscreenMode" />
         <OpenLayersCompassButton v-if="compassButton && !is3dActive && !isFullscreenMode" />
         <slot />

diff --git a/src/modules/map/components/toolbox/ZoomButtons.vue b/src/modules/map/components/toolbox/ZoomButtons.vue
@@ -1,18 +1,53 @@
 <script setup>
+import { Ray } from 'cesium'
+import { computed, inject } from 'vue'
 import { useStore } from 'vuex'
 
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 
 const dispatcher = { dispatcher: 'ZoomButtons.vue' }
 
 const store = useStore()
+const is3dActive = computed(() => store.state.cesium.active)
+const resolution = computed(() => store.getters.resolution)
+
 useTippyTooltip('#zoomButtons [data-tippy-content]', { placement: 'left' })
 
+const getViewer = inject('getViewer')
+
+// The `step` variable is used with the 3D viewer. The goal was to find an increase or
+// decrease in the zoom that emulated a zoom level in an agreeable way. `200` here is a
+// magic number, found empirically, to achieve that goal.
+const step = computed(() => resolution.value * 200)
+
+function moveCamera(distance) {
+    const camera = getViewer().scene?.camera
+    if (camera) {
+        camera.flyTo({
+            destination: Ray.getPoint(new Ray(camera.position, camera.direction), distance),
+            orientation: {
+                heading: camera.heading,
+                pitch: camera.pitch,
+                roll: camera.roll,
+            },
+            duration: 0.25,
+        })
+    }
+}
+
 function increaseZoom() {
-    store.dispatch('increaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(step.value)
+    } else {
+        store.dispatch('increaseZoom', dispatcher)
+    }
 }
 function decreaseZoom() {
-    store.dispatch('decreaseZoom', dispatcher)
+    if (is3dActive.value) {
+        moveCamera(-step.value)
+    } else {
+        store.dispatch('decreaseZoom', dispatcher)
+    }
 }
 </script>