BGDIINF_SB-2980 : fixes

Author: vladyslav-tk

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

@@ -40,13 +40,6 @@ export default {
             availableIconSets: (state) => state.drawing.iconSets,
         }),
     },
-    watch: {
-        url() {
-            this.olLayer.getSource().clear()
-            this.removeLayer(this.layer)
-            this.loadLayer()
-        },
-    },
     methods: {
         async loadLayer() {
             try {
@@ -71,6 +64,7 @@ export default {
             } catch (error) {
                 log.error(`Failed to load kml from ${this.url}`, error)
             }
+            return undefined
         },
     },
 }

src/modules/map/components/cesium/constants.js

@@ -34,3 +34,10 @@ export const CAMERA_MIN_PITCH = -Math.PI / 2
  * @type {number}
  */
 export const CAMERA_MAX_PITCH = Math.PI / 4
+
+/**
+ * Distance on which depth test will be disabled for primitive to avoid cutting by terrain
+ *
+ * @type {number}
+ */
+export const PRIMITIVE_DISABLE_DEPTH_TEST_DISTANCE = 75000

src/modules/map/components/cesium/utils/addPrimitiveLayer-mixins.js

@@ -1,9 +1,10 @@
 import addLayerToViewer from './addLayerToViewer-mixins'
-import { updateCollectionOpacity } from '@/modules/map/components/cesium/utils/primitiveLayerUtils'
+import { updateCollectionProperties } from '@/modules/map/components/cesium/utils/primitiveLayerUtils'
 import { PrimitiveCollection } from 'cesium'
 import { Vector as VectorLayer } from 'ol/layer'
 import FeatureConverter from 'ol-cesium/src/olcs/FeatureConverter'
 import { IS_TESTING_WITH_CYPRESS } from '@/config'
+import { PRIMITIVE_DISABLE_DEPTH_TEST_DISTANCE } from '@/modules/map/components/cesium/constants'
 
 const STYLE_RESOLUTION = 20
 
@@ -25,9 +26,16 @@ const addPrimitiveLayerMixins = {
     mixins: [addLayerToViewer],
     watch: {
         opacity(newOpacity) {
-            updateCollectionOpacity(this.layer, newOpacity)
+            updateCollectionProperties(this.layer, { opacity: newOpacity })
             this.getViewer().scene.requestRender()
         },
+        url() {
+            this.olLayer.getSource().clear()
+            this.removeLayer(this.layer)
+            this.loadLayer().then((projection) => {
+                if (projection) this.addPrimitive(projection)
+            })
+        },
     },
     created() {
         this.layer = new PrimitiveCollection()
@@ -37,7 +45,7 @@ const addPrimitiveLayerMixins = {
             properties: { altitudeMode: 'clampToGround' },
         })
         this.loadLayer().then((projection) => {
-            this.addPrimitive(projection)
+            if (projection) this.addPrimitive(projection)
         })
     },
     methods: {
@@ -65,16 +73,20 @@ const addPrimitiveLayerMixins = {
             )
             // need to wait for terrain loaded otherwise primitives will be placed wrong
             if (this.layer) {
+                const collectionProperties = {
+                    opacity: this.opacity,
+                    disableDepthTestDistance: PRIMITIVE_DISABLE_DEPTH_TEST_DISTANCE,
+                }
                 if (scene.globe.tilesLoaded || IS_TESTING_WITH_CYPRESS) {
                     this.layer.add(counterpart.getRootPrimitive())
-                    updateCollectionOpacity(this.layer, this.opacity)
+                    updateCollectionProperties(this.layer, collectionProperties)
                     this.getViewer().scene.requestRender()
                 } else {
                     const unlisten = scene.globe.tileLoadProgressEvent.addEventListener(
                         (queueLength) => {
                             if (scene.globe.tilesLoaded && queueLength === 0) {
                                 this.layer.add(counterpart.getRootPrimitive())
-                                updateCollectionOpacity(this.layer, this.opacity)
+                                updateCollectionProperties(this.layer, collectionProperties)
                                 this.getViewer().scene.requestRender()
                                 unlisten()
                             }

src/modules/map/components/cesium/utils/primitiveLayerUtils.js

@@ -9,30 +9,46 @@ import {
     PrimitiveCollection,
 } from 'cesium'
 
-export function updateCollectionOpacity(collection, opacity) {
+/**
+ * This function goes throw the primitive collection and update passed properties
+ * @param {PrimitiveCollection} collection
+ * @param {{opacity: number | undefined, disableDepthTestDistance: number | undefined}} properties
+ */
+export function updateCollectionProperties(collection, properties) {
+    const opacity =
+        typeof properties.opacity === 'number' && properties.opacity >= 0 && properties.opacity <= 1
+            ? properties.opacity
+            : undefined
+    const disableDepthTestDistance =
+        typeof properties.disableDepthTestDistance === 'number'
+            ? properties.disableDepthTestDistance
+            : undefined
+
     for (let i = 0; i < collection.length; i++) {
         const primitive = collection.get(i)
         if (primitive instanceof Primitive || primitive instanceof GroundPolylinePrimitive) {
-            if (primitive.appearance) {
+            if (primitive.appearance && opacity !== undefined) {
                 const material = primitive.appearance.material
                 const color = material.uniforms.color || material.uniforms.evenColor
                 material.uniforms.color = new Color(color.red, color.green, color.blue, opacity)
             }
         } else if (primitive instanceof Billboard) {
-            // todo just for test, will be moved in appropriate place
-            primitive.disableDepthTestDistance = 75000
-            if (primitive.color) {
+            if (disableDepthTestDistance !== undefined) {
+                primitive.disableDepthTestDistance = disableDepthTestDistance
+            }
+            if (primitive.color && opacity !== undefined) {
                 const color = primitive.color
                 primitive.color = new Color(color.red, color.green, color.blue, opacity)
             }
         } else if (primitive instanceof Label) {
-            // todo just for test, will be moved in appropriate place
-            primitive.disableDepthTestDistance = 75000
-            if (primitive.fillColor) {
+            if (disableDepthTestDistance !== undefined) {
+                primitive.disableDepthTestDistance = disableDepthTestDistance
+            }
+            if (primitive.fillColor && opacity !== undefined) {
                 const color = primitive.fillColor
                 primitive.fillColor = new Color(color.red, color.green, color.blue, opacity)
             }
-            if (primitive.outlineColor) {
+            if (primitive.outlineColor && opacity !== undefined) {
                 const color = primitive.outlineColor
                 primitive.outlineColor = new Color(color.red, color.green, color.blue, opacity)
             }
@@ -41,7 +57,7 @@ export function updateCollectionOpacity(collection, opacity) {
             primitive instanceof BillboardCollection ||
             primitive instanceof LabelCollection
         ) {
-            updateCollectionOpacity(primitive, opacity)
+            updateCollectionProperties(primitive, properties)
         }
     }
 }