Merge pull request #607 from geoadmin/feat-PB-100-manage-3d-parameters

PB-100: Manage camera and 3D parameter from the legacy parameters

Author: ismailsunni

src/router/legacyPermalinkManagement.routerPlugin.js

@@ -2,6 +2,7 @@ import proj4 from 'proj4'
 
 import { DISABLE_DRAWING_MENU_FOR_LEGACY_ON_HOSTNAMES } from '@/config'
 import { transformLayerIntoUrlString } from '@/router/storeSync/LayerParamConfig.class'
+import { backgroundMatriceBetween2dAnd3d as backgroundMatriceBetweenLegacyAndNew } from '@/store/plugins/2d-to-3d-management.plugin'
 import { LV95, WEBMERCATOR, WGS84 } from '@/utils/coordinates/coordinateSystems'
 import CustomCoordinateSystem from '@/utils/coordinates/CustomCoordinateSystem.class'
 import SwissCoordinateSystem from '@/utils/coordinates/SwissCoordinateSystem.class'
@@ -51,7 +52,8 @@ const handleLegacyParam = (
     store,
     newQuery,
     latlongCoordinates,
-    legacyCoordinates
+    legacyCoordinates,
+    cameraPosition
 ) => {
     const { projection } = store.state.position
     let newValue
@@ -83,9 +85,11 @@ const handleLegacyParam = (
 
         case 'lon':
             latlongCoordinates[0] = Number(legacyValue)
+            cameraPosition[0] = Number(legacyValue)
             break
         case 'lat':
             latlongCoordinates[1] = Number(legacyValue)
+            cameraPosition[1] = Number(legacyValue)
             break
 
         // taking all layers related param aside so that they can be processed later (see below)
@@ -123,6 +127,18 @@ const handleLegacyParam = (
             newValue = legacyValue
             break
 
+        case 'elevation':
+            cameraPosition[2] = Number(legacyValue)
+            break
+
+        case 'pitch':
+            cameraPosition[3] = Number(legacyValue)
+            break
+
+        case 'heading':
+            cameraPosition[4] = Number(legacyValue)
+            break
+
         // if no special work to do, we just copy past legacy params to the new viewer
         default:
             newValue = legacyValue
@@ -145,6 +161,7 @@ const handleLegacyParams = (legacyParams, store, to, next) => {
     const { projection } = store.state.position
     let legacyCoordinates = []
     let latlongCoordinates = []
+    let cameraPosition = []
     // TODO BGDIINF_SB-2685: remove once legacy prod is decommissioned
     const isOnDevelopmentHost = DISABLE_DRAWING_MENU_FOR_LEGACY_ON_HOSTNAMES.some(
         (hostname) => hostname === store.state.ui.hostname
@@ -157,9 +174,24 @@ const handleLegacyParams = (legacyParams, store, to, next) => {
             store,
             newQuery,
             latlongCoordinates,
-            legacyCoordinates
+            legacyCoordinates,
+            cameraPosition
         )
     })
+    if (cameraPosition.length >= 3) {
+        cameraPosition.push('')
+        newQuery['camera'] = cameraPosition.join(',')
+        newQuery['3d'] = true
+        newQuery['sr'] = WEBMERCATOR.epsgNumber
+
+        // Handle different background layer from legacy 3D parameter
+        if (newQuery['bgLayer']) {
+            const newBackgroundLayer = backgroundMatriceBetweenLegacyAndNew[newQuery['bgLayer']]
+            if (newBackgroundLayer) {
+                newQuery['bgLayer'] = newBackgroundLayer
+            }
+        }
+    }
 
     // Convert legacies coordinates if needed
     if (latlongCoordinates.length === 2) {
@@ -241,7 +273,6 @@ const legacyPermalinkManagementRouterPlugin = (router, store) => {
     // to.query only parse the query after the /#? and legacy params are at the root /?
     const legacyParams =
         window.location && window.location.search ? parseLegacyParams(window.location.search) : null
-
     router.beforeEach((to, from, next) => {
         // Waiting for the app to enter the MapView before dealing with legacy param, otherwise
         // the storeSync plugin might overwrite some parameters. To handle legacy param we also

src/store/plugins/2d-to-3d-management.plugin.js

@@ -1,7 +1,7 @@
 import { DEFAULT_PROJECTION } from '@/config'
 import { WEBMERCATOR } from '@/utils/coordinates/coordinateSystems'
 
-const backgroundMatriceBetween2dAnd3d = {
+export const backgroundMatriceBetween2dAnd3d = {
     'ch.swisstopo.pixelkarte-farbe': 'ch.swisstopo.swisstlm3d-karte-farbe_3d',
     'ch.swisstopo.pixelkarte-grau': 'ch.swisstopo.swisstlm3d-karte-grau_3d',
     'ch.swisstopo.swissimage': 'ch.swisstopo.swissimage_3d',

tests/cypress/support/commands.js

@@ -214,7 +214,13 @@ Cypress.Commands.add(
                 errorMsg: 'Timeout waiting for all layers to be loaded',
             }
         )
-        if ('3d' in queryParams && queryParams['3d'] === true) {
+
+        // In the legacy URL, 3d is not found. We check if the map in 3d or not by checking the pitch, heading, and elevation
+        const isLegacy3d =
+            'pitch' in queryParams || 'heading' in queryParams || 'elevation' in queryParams
+        const is3d = '3d' in queryParams && queryParams['3d'] === true
+
+        if (is3d || isLegacy3d) {
             cy.get('[data-cy="cesium-map"]').should('be.visible')
         } else {
             cy.get('[data-cy="ol-map"]', { timeout: 10000 }).should('be.visible')

tests/cypress/tests-e2e/legacyParamImport.cy.js

@@ -288,4 +288,81 @@ describe('Test on legacy param import', () => {
             })
         })
     })
+
+    context('3D import', () => {
+        const lat = 47.3
+        const lon = 7.3
+        const elevation = 215370
+        const heading = 318
+        const pitch = -45
+
+        it('transfers camera parameter from legacy URL to the new URL', () => {
+            cy.goToMapView({
+                lat,
+                lon,
+                elevation,
+                heading,
+                pitch,
+            })
+
+            // checking in the store that the parameters have been converted into the new 3D parameters
+            cy.readStoreValue('state.cesium.active').should('eq', true) // cesium should be active
+
+            // Checking camera position
+            cy.readStoreValue('state.position.camera.x').should('eq', lon)
+            cy.readStoreValue('state.position.camera.y').should('eq', lat)
+            cy.readStoreValue('state.position.camera.z').should('eq', elevation)
+            cy.readStoreValue('state.position.camera.heading').should('eq', heading)
+            cy.readStoreValue('state.position.camera.pitch').should('eq', pitch)
+            cy.readStoreValue('state.position.camera.roll').should('eq', 360)
+
+            // EPSG is set to 3857
+            cy.readStoreValue('state.position.projection.epsgNumber').should('eq', 3857)
+        })
+
+        it('transfers camera parameter from legacy URL to the new URL only heading', () => {
+            cy.goToMapView({
+                lat,
+                lon,
+                heading,
+            })
+
+            // checking in the store that the parameters have been converted into the new 3D parameters
+            cy.readStoreValue('state.cesium.active').should('eq', true) // cesium should be active
+
+            // Checking camera position
+            cy.readStoreValue('state.position.camera.x').should('eq', lon)
+            cy.readStoreValue('state.position.camera.y').should('eq', lat)
+            cy.readStoreValue('state.position.camera.z').should('eq', 0)
+            cy.readStoreValue('state.position.camera.heading').should('eq', heading)
+            cy.readStoreValue('state.position.camera.pitch').should('eq', 0)
+            cy.readStoreValue('state.position.camera.roll').should('eq', 360)
+
+            // EPSG is set to 3857
+            cy.readStoreValue('state.position.projection.epsgNumber').should('eq', 3857)
+        })
+
+        it('transfers camera parameter from legacy URL to the new URL only elevation', () => {
+            cy.goToMapView({
+                lat,
+                lon,
+                elevation,
+            })
+
+            // checking in the store that the parameters have been converted into the new 3D parameters
+            cy.readStoreValue('state.cesium.active').should('eq', true) // cesium should be active
+
+            // Checking camera position
+            // x, y, and z seems recalculated when there is only elevation, so I just check that they are not null
+            cy.readStoreValue('state.position.camera.x').should('not.be.null')
+            cy.readStoreValue('state.position.camera.y').should('not.be.null')
+            cy.readStoreValue('state.position.camera.z').should('not.be.null')
+            cy.readStoreValue('state.position.camera.heading').should('eq', 360)
+            cy.readStoreValue('state.position.camera.pitch').should('eq', -90)
+            cy.readStoreValue('state.position.camera.roll').should('eq', 0)
+
+            // EPSG is set to 3857
+            cy.readStoreValue('state.position.projection.epsgNumber').should('eq', 3857)
+        })
+    })
 })