BGDIINF_SB-3006: Send click on the 3D map to the store

src/modules/map/components/cesium/CesiumMap.vue

@@ -35,11 +35,13 @@ import { UIModes } from '@/store/modules/ui.store'
 import '@geoblocks/cesium-compass'
 import {
     Cartesian3,
+    Cartographic,
     CesiumTerrainProvider,
     Color,
     Math as CesiumMath,
     RequestScheduler,
     Viewer,
+    ScreenSpaceEventType,
 } from 'cesium'
 import { mapActions, mapGetters, mapState } from 'vuex'
 import CesiumInternalLayer from './CesiumInternalLayer.vue'
@@ -51,6 +53,9 @@ import {
     TERRAIN_URL,
 } from './constants'
 import { calculateHeight, limitCameraCenter, limitCameraPitchRoll } from './utils/cameraUtils'
+import { ClickInfo, ClickType } from '@/store/modules/map.store'
+import { WEBMERCATOR, WGS84 } from '@/utils/coordinateSystems'
+import proj4 from 'proj4'
 
 export default {
     components: { CesiumInternalLayer },
@@ -153,6 +158,10 @@ export default {
         scene.backgroundColor = Color.TRANSPARENT
 
         this.viewer.camera.moveEnd.addEventListener(this.onCameraMoveEnd)
+        this.viewer.screenSpaceEventHandler.setInputAction(
+            this.onClick,
+            ScreenSpaceEventType.LEFT_CLICK
+        )
 
         const globe = scene.globe
         globe.baseColor = Color.TRANSPARENT
@@ -185,7 +194,7 @@ export default {
         delete this.viewer
     },
     methods: {
-        ...mapActions(['setCameraPosition']),
+        ...mapActions(['setCameraPosition', 'click']),
         flyToPosition() {
             const x = this.camera ? this.camera.x : this.centerEpsg4326[0]
             const y = this.camera ? this.camera.y : this.centerEpsg4326[1]
@@ -219,6 +228,19 @@ export default {
                 roll: CesiumMath.toDegrees(camera.roll).toFixed(0),
             })
         },
+        onClick(event) {
+            const carto = Cartographic.fromCartesian(this.viewer.scene.pickPosition(event.position))
+            const wgs84Coords = [carto.longitude, carto.latitude].map(CesiumMath.toDegrees)
+            const mercatorCoords = proj4(WGS84.epsg, WEBMERCATOR.epsg, wgs84Coords)
+            this.click(
+                new ClickInfo(
+                    mercatorCoords,
+                    [event.position.x, event.position.y],
+                    [],
+                    ClickType.LEFT_SINGLECLICK
+                )
+            )
+        },
     },
 }
 </script>

tests/e2e-cypress/integration/3d/click.cy.js

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+import { ClickType } from '@/store/modules/map.store'
+import { Cartesian3 } from 'cesium'
+import { WEBMERCATOR, WGS84 } from '@/utils/coordinateSystems'
+import proj4 from 'proj4'
+
+describe('Testing click', () => {
+    context('click', () => {
+        beforeEach(() => {
+            cy.goToMapView({
+                '3d': true,
+            })
+        })
+        it('left click', () => {
+            cy.waitUntilCesiumTilesLoaded().then((viewer) => {
+                const lon = 7.451498
+                const lat = 46.92805
+                viewer.camera.flyTo({
+                    destination: Cartesian3.fromDegrees(lon, lat, 1000),
+                    duration: 0.0,
+                })
+                cy.waitUntilCesiumTilesLoaded().then(() => {
+                    cy.get('[data-cy="cesium-map"] .cesium-viewer').click()
+                    cy.readStoreValue('state.map.clickInfo').then((clickInfo) => {
+                        expect(clickInfo.clickType).to.equal(ClickType.LEFT_SINGLECLICK)
+                        expect(clickInfo.features.length).to.equal(0)
+                        expect(clickInfo.pixelCoordinate[0]).to.equal(
+                            Cypress.config('viewportWidth') / 2
+                        )
+                        expect(clickInfo.pixelCoordinate[1]).to.equal(
+                            Cypress.config('viewportHeight') / 2
+                        )
+                        const mercatorCoords = proj4(WGS84.epsg, WEBMERCATOR.epsg, [lon, lat])
+                        expect(clickInfo.coordinate[0]).to.approximately(mercatorCoords[0], 0.001)
+                        expect(clickInfo.coordinate[1]).to.approximately(mercatorCoords[1], 0.001)
+                    })
+                })
+            })
+        })
+    })
+})