Merge pull request #211 from Geoportail-Luxembourg/open-in-vcs-3d

Open 3D map (VCS)

Author: AlitaBernachot

.env

@@ -77,3 +77,6 @@ VITE_USERINFO_URL="/getuserinfo"
 VITE_MYACCOUNT_URL="https://myaccount.geoportail.lu"
 VITE_MYACCOUNT_RECOVER_URL="https://myaccount.geoportail.lu/recover-password"
 VITE_MYACCOUNT_NEW_URL="https://myaccount.geoportail.lu/new-user"
+
+# VCS
+VITE_LUX_VCS_URL="https://3d.geoportail.lu/"

.env.development

@@ -78,3 +78,6 @@ VITE_USERINFO_URL="https://migration.geoportail.lu/getuserinfo"
 VITE_MYACCOUNT_URL="https://myaccount.geoportail.lu"
 VITE_MYACCOUNT_RECOVER_URL="https://myaccount.geoportail.lu/recover-password"
 VITE_MYACCOUNT_NEW_URL="https://myaccount.geoportail.lu/new-user"
+
+# VCS
+VITE_LUX_VCS_URL="http://localhost:8008/"

.env.e2e

@@ -78,3 +78,6 @@ VITE_USERINFO_URL="https://migration.geoportail.lu/getuserinfo"
 VITE_MYACCOUNT_URL="https://myaccount.geoportail.lu"
 VITE_MYACCOUNT_RECOVER_URL="https://myaccount.geoportail.lu/recover-password"
 VITE_MYACCOUNT_NEW_URL="https://myaccount.geoportail.lu/new-user"
+
+# VCS
+VITE_LUX_VCS_URL="https://3d.geoportail.lu/"

.env.staging

@@ -78,3 +78,6 @@ VITE_USERINFO_URL="/getuserinfo"
 VITE_MYACCOUNT_URL="https://myaccount.geoportail.lu"
 VITE_MYACCOUNT_RECOVER_URL="https://myaccount.geoportail.lu/recover-password"
 VITE_MYACCOUNT_NEW_URL="https://myaccount.geoportail.lu/new-user"
+
+# VCS
+VITE_LUX_VCS_URL="https://3d.geoportail.lu/"

cypress/e2e/3d-viewer/link-to-3d-viewer.cy.ts

@@ -0,0 +1,26 @@
+describe('Link to 3D Viewer', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  describe('When user arrives on the page', () => {
+    beforeEach(() => {
+      cy.get('[data-cy="catalogButton"]').click()
+      cy.get('[data-cy="parentLayerLabel-242"]').find('button').first().click()
+      cy.get('[data-cy="parentLayerLabel-309"]').click()
+      cy.get('[data-cy="layerLabel-269"]').click()
+      cy.get('[data-cy="layerLabel-349"]').click()
+      cy.get('[data-cy="layerLabel-329"]').click()
+    })
+
+    it('The 3D button is an external link that opens the 3D viewer in a predefined tab named "lux3d", automatically loading the current coordinates (x, y, z) and selected layers for seamless continuation of the session', () => {
+      cy.get('[data-cy="3dViewerLink"] > a')
+        .should(
+          'have.attr',
+          'href',
+          'https://3d.geoportail.lu/?state=%5B%5B%5B6.000000496232584%2C49.69999815293053%2C350000%5D%2C%5B6.000000496232584%2C49.69999815293053%2C350000%5D%2C300%2C0%2C-90%2C0%5D%2C%22cesium%22%2C%5B%22catalogConfig%22%2C%22LuxConfig%22%5D%2C%5B%5B%22communes_labels%22%2C1%2C0%5D%2C%5B%22country%22%2C1%2C0%5D%2C%5B%22cantons%22%2C1%2C0%5D%5D%2C%5B%5D%2C0%5D'
+        )
+        .and('have.attr', 'target', 'lux3d')
+    })
+  })
+})

src/assets/ol.css

@@ -17,7 +17,8 @@
     @apply absolute rounded p-1;
   }
 
-  .ol-control button {
+  .ol-control button,
+  .ol-control a[type='button'] {
     @apply w-10 h-10 text-xl text-center font-normal indent-0 block ol-btn m-[-1px] p-0 border-[1px] border-[color:var(--color-border-default)];
     font-family: 'geoportail-icons-wc';
   }

src/components/map-controls/map-3d.vue

@@ -1,13 +1,32 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useTranslation } from 'i18next-vue'
 import { CLASS_CONTROL, CLASS_UNSELECTABLE } from 'ol/css'
 import Control from 'ol/control/Control'
 import { Options } from 'ol/control/Control'
+import { toLonLat } from 'ol/proj'
 
 import useControl from '@/composables/control/control.composable'
 import { useMapStore } from '@/stores/map.store'
 
+const LUX_VCS_URL = import.meta.env.VITE_LUX_VCS_URL
+const LUX_VCS_COORDINATES = [6.13, 49.61]
+const LUX_VCS_MODULES = ['catalogConfig', 'LuxConfig']
+const zoomToCesiumAltitude = {
+  9: 350000,
+  10: 180000,
+  11: 100000,
+  12: 40000,
+  13: 25000,
+  14: 9000,
+  15: 6000,
+  16: 3500,
+  17: 1900,
+  18: 900,
+  19: 600,
+}
+
 const mapStore = useMapStore()
 const { t } = useTranslation()
 const props = withDefaults(
@@ -18,33 +37,77 @@ const props = withDefaults(
   }>(),
   {
     className: 'map-3d-button',
-    label: '\ue057',
-    tipLabel: '3d',
+    label: '3D',
+    tipLabel: '3D',
   }
 )
+const { x, y, zoom, layers } = storeToRefs(mapStore)
 const controlElement = ref(null)
+const linkTo3dMap = computed(() => {
+  // Example pattern for VCS state
+  // [[[6.131935,49.611622,5000],[6.131935,49.611622,50],300,0,-90,0],"cesium",["moduleName"],[["addresses",1,0],["communes",1,0]],[],0]
+
+  const [lon, lat] = getLonLatFromXY(x.value, y.value)
+  const altitude = getAltFromZoom(zoom.value ?? 12)
+  const selectedLayers = layers.value.map(l => JSON.stringify([l.name, 1, 0]))
+  const state = `[[[${[lon, lat, altitude].join(',')}],[${[
+    lon,
+    lat,
+    altitude,
+  ].join(',')}],300,0,-90,0],"cesium",["${LUX_VCS_MODULES.join(
+    '","'
+  )}"],[${selectedLayers.join(',')}],[],0]`
+
+  return `${LUX_VCS_URL}?state=${encodeURIComponent(state)}`
+})
 
 onMounted(() =>
   useControl(Control, {
     ...props,
-    ...{ target: controlElement },
+    target: controlElement,
   } as unknown as Options)
 )
 
-const toggle3d = () => {
-  mapStore.setIs3dActive(!mapStore.is3dActive)
+function getLonLatFromXY(
+  x: number | undefined | null,
+  y: number | undefined | null
+) {
+  return x && y ? toLonLat([x, y]) : LUX_VCS_COORDINATES
+}
+
+function getAltFromZoom(zoom: number) {
+  const minZoom = 9
+  const maxZoom = 19
+
+  const clampedZoom = Math.max(
+    minZoom,
+    Math.min(maxZoom, Math.round(zoom))
+  ) as keyof typeof zoomToCesiumAltitude
+
+  return zoomToCesiumAltitude[clampedZoom]
 }
 </script>
 
 <template>
   <div
+    data-cy="3dViewerLink"
     ref="controlElement"
-    :class="`${props.className} ${CLASS_UNSELECTABLE} ${CLASS_CONTROL} ${
-      mapStore.is3dActive ? 'active' : ''
-    }`"
+    :class="`${props.className} ${CLASS_UNSELECTABLE} ${CLASS_CONTROL}`"
   >
-    <button :title="t(props.tipLabel)" @click="toggle3d">
-      {{ props.label }}
-    </button>
+    <a
+      type="button"
+      target="lux3d"
+      :href="linkTo3dMap"
+      :title="t(props.tipLabel)"
+      >3D</a
+    >
   </div>
 </template>
+
+<style lang="css" scoped>
+.ol-control a[type='button'] {
+  font-family: 'DINNextLTPro-Condensed', Arial, sans-serif;
+  font-size: 1.5em;
+  line-height: 2.5rem;
+}
+</style>

src/services/state-persistor/state-persistor-map.service.ts

@@ -3,6 +3,7 @@ import { getTransform, ProjectionLike, transform } from 'ol/proj'
 import { Coordinate } from 'ol/coordinate'
 import ObjectEventType from 'ol/ObjectEventType'
 
+import { useMapStore } from '@/stores/map.store'
 import useMap, {
   PROJECTION_WEBMERCATOR,
   PROJECTION_LUX,
@@ -22,6 +23,7 @@ import {
   V2_ZOOM_TO_V3_ZOOM_,
 } from './state-persistor-map.mapper'
 import { debounce, stringToNumber } from '@/services/utils'
+import { storeToRefs } from 'pinia'
 
 class StatePersistorMapService implements StatePersistorService {
   bootstrap(): void {
@@ -30,18 +32,25 @@ class StatePersistorMapService implements StatePersistorService {
   }
 
   persistZoom() {
+    const mapStore = useMapStore()
+    const { zoom } = storeToRefs(mapStore)
     const view = useMap().getOlMap().getView()
-    const fnStorageSetValueZoom = () => {
-      const zoom = view.getZoom()
-      storageHelper.setValue(SP_KEY_ZOOM, zoom ? Math.ceil(zoom) : null)
+
+    const fnPersistValueZoom = () => {
+      const z = view.getZoom()
+      const pz = z ? Math.ceil(z) : null
+
+      storageHelper.setValue(SP_KEY_ZOOM, pz)
+
+      zoom.value = pz
     }
 
-    fnStorageSetValueZoom()
+    fnPersistValueZoom()
 
     olEvents.listen(
       view,
       'change:resolution',
-      debounce(fnStorageSetValueZoom, 300)
+      debounce(fnPersistValueZoom, 300)
     )
   }
 
@@ -62,19 +71,28 @@ class StatePersistorMapService implements StatePersistorService {
   }
 
   persistXY() {
+    const mapStore = useMapStore()
+    const { x, y } = storeToRefs(mapStore)
     const view = useMap().getOlMap().getView()
-    const fnStorageSetValueXY = () => {
+
+    const fnPersistValueXY = () => {
       const center = view.getCenter()
-      storageHelper.setValue(SP_KEY_X, center ? Math.round(center[0]) : null)
-      storageHelper.setValue(SP_KEY_Y, center ? Math.round(center[1]) : null)
+      const px = center ? Math.round(center[0]) : null
+      const py = center ? Math.round(center[1]) : null
+
+      storageHelper.setValue(SP_KEY_X, px)
+      storageHelper.setValue(SP_KEY_Y, py)
+
+      x.value = px
+      y.value = py
     }
 
-    fnStorageSetValueXY()
+    fnPersistValueXY()
 
     olEvents.listen(
       view,
       ObjectEventType.PROPERTYCHANGE,
-      debounce(fnStorageSetValueXY, 300)
+      debounce(fnPersistValueXY, 300)
     )
   }
 

src/stores/map.store.ts

@@ -15,6 +15,9 @@ export const useMapStore = defineStore('map', () => {
   const bgLayer: Ref<Layer | undefined | null> = ref(undefined) // undefined => at start app | null => blank bgLayer
   const minZoom: Ref<number | undefined> = ref(undefined)
   const maxZoom: Ref<number | undefined> = ref(undefined)
+  const x = ref<number | undefined | null>(undefined)
+  const y = ref<number | undefined | null>(undefined)
+  const zoom = ref<number | undefined | null>(undefined)
 
   function setBgLayer(layer: Layer | null) {
     bgLayer.value = layer
@@ -112,6 +115,9 @@ export const useMapStore = defineStore('map', () => {
     bgLayer,
     minZoom,
     maxZoom,
+    x,
+    y,
+    zoom,
     addLayers,
     add3dLayers,
     removeLayers,