BGDIINF_SB-2977 : profile position tracker for Cesium

Author: vladyslav-tk

src/modules/infobox/FeatureElevationProfilePlotCesiumBridge.vue

@@ -0,0 +1,84 @@
+<template>
+    <slot />
+</template>
+<script>
+import { LV95, WGS84 } from '@/utils/coordinateSystems'
+import { FeatureStyleColor, RED } from '@/utils/featureStyleUtils'
+import proj4 from 'proj4'
+import { CallbackProperty, Cartesian3, Color, Ellipsoid, Entity, HeightReference } from 'cesium'
+
+export default {
+    inject: ['getViewer'],
+    props: {
+        coordinates: {
+            type: Array,
+            default: null,
+        },
+        trackingPointColor: {
+            type: FeatureStyleColor,
+            default: RED,
+        },
+    },
+    watch: {
+        coordinates(newCoordinates) {
+            if (newCoordinates) {
+                this.updatePosition()
+                if (!this.pointAdded) this.addTrackingPoint()
+            } else {
+                this.removeTrackingPoint()
+            }
+        },
+        trackingPointColor(newColor) {
+            this.pointFill = Color.fromCssColorString(newColor.fill)
+            this.pointBorder = Color.fromCssColorString(newColor.border)
+            this.getViewer()?.scene.requestRender()
+        },
+    },
+    mounted() {
+        this.pointAdded = false
+        this.trackingPointPosition = new Cartesian3()
+        this.pointFill = Color.fromCssColorString(this.trackingPointColor.fill)
+        this.pointBorder = Color.fromCssColorString(this.trackingPointColor.border)
+        this.trackingPoint = new Entity({
+            position: new CallbackProperty(() => this.trackingPointPosition, false),
+            point: {
+                show: true,
+                color: new CallbackProperty(() => this.pointFill, false),
+                outlineWidth: 5,
+                outlineColor: new CallbackProperty(() => this.pointBorder, false),
+                pixelSize: 15,
+                heightReference: HeightReference.CLAMP_TO_GROUND,
+                disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            },
+        })
+        if (this.coordinates) {
+            this.updatePosition()
+            this.addTrackingPoint()
+        }
+    },
+    unmounted() {
+        this.removeTrackingPoint()
+    },
+    methods: {
+        addTrackingPoint() {
+            this.pointAdded = true
+            this.getViewer()?.entities.add(this.trackingPoint)
+        },
+        removeTrackingPoint() {
+            this.pointAdded = false
+            this.getViewer()?.entities.remove(this.trackingPoint)
+        },
+        updatePosition() {
+            const wgs84Position = proj4(LV95.epsg, WGS84.epsg, this.coordinates)
+            Cartesian3.fromDegrees(
+                wgs84Position[0],
+                wgs84Position[1],
+                0,
+                Ellipsoid.WGS84,
+                this.trackingPointPosition
+            )
+            this.getViewer()?.scene.requestRender()
+        },
+    },
+}
+</script>

src/modules/infobox/components/FeatureElevationProfilePlot.vue

@@ -52,7 +52,11 @@
                 :tracking-point-color="trackingPointColor"
                 :coordinates="pointBeingHovered?.coordinates"
             />
-            <!--TODO BGDIINF_SB-2977 : create a position tracker for Cesium, similar to FeatureElevationProfilePlotOpenLayersBridge-->
+            <FeatureElevationProfilePlotCesiumBridge
+                v-if="showIn3d"
+                :tracking-point-color="trackingPointColor"
+                :coordinates="pointBeingHovered?.coordinates"
+            />
         </div>
     </div>
 </template>
@@ -65,6 +69,7 @@ import { round } from '@/utils/numberUtils'
 import { resetZoom } from 'chartjs-plugin-zoom'
 import { Line as LineChart } from 'vue-chartjs'
 import { mapState } from 'vuex'
+import FeatureElevationProfilePlotCesiumBridge from '@/modules/infobox/FeatureElevationProfilePlotCesiumBridge.vue'
 
 const GAP_BETWEEN_TOOLTIP_AND_PROFILE = 12 //px
 
@@ -86,6 +91,7 @@ const GAP_BETWEEN_TOOLTIP_AND_PROFILE = 12 //px
 export default {
     components: {
         FeatureElevationProfilePlotOpenLayersBridge,
+        FeatureElevationProfilePlotCesiumBridge,
         LineChart,
     },
     props: {

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

@@ -111,10 +111,9 @@ import { extractOlFeatureGeodesicCoordinates } from '@/modules/drawing/lib/drawi
 import log from '@/utils/logging'
 import { LineString, Point, Polygon } from 'ol/geom'
 import FeatureEdit from '@/modules/infobox/components/FeatureEdit.vue'
-import OpenLayersPopover from '@/modules/map/components/openlayers/OpenLayersPopover.vue'
 
 export default {
-    components: { OpenLayersPopover, FeatureEdit, FeatureList, CesiumPopover, CesiumInternalLayer },
+    components: { FeatureEdit, FeatureList, CesiumPopover, CesiumInternalLayer },
     provide() {
         return {
             // sharing cesium viewer object with children components