feat: Allow to configure background color and globe visibility (closes …

…#874)
kalisio · Jun 7, 2024 · c88ca09 · c88ca09
1 parent 44d2504
commit c88ca09
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/map/client/cesium/utils/utils.style.js b/map/client/cesium/utils/utils.style.js
@@ -85,21 +85,22 @@ export function getPolygonSimpleStyle (feature, options, engine, engineStylePath
   return convertSimpleStyleColors(convertPolygonStyleToSimpleStyle(style))
 }
 
+// Helper to convert from string to objects
+export function createCesiumObject () {
+  const args = Array.from(arguments)
+  const constructor = args[0]
+  args.shift()
+  const Class = _.get(Cesium, constructor)
+  // Can be callable, constructable or constant
+  let object
+  if (typeof Class === 'function') {
+    try { object = Class(...args) } catch (error) { /* Simply avoid raising any error */ }
+    try { object = new Class(...args) } catch (error) { /* Simply avoid raising any error */ }
+  } else object = Class
+  return object
+}
+
 export function convertToCesiumObjects (style) {
-  // Helper to convert from string to objects
-  function createCesiumObject () {
-    const args = Array.from(arguments)
-    const constructor = args[0]
-    args.shift()
-    const Class = _.get(Cesium, constructor)
-    // Can be callable, constructable or constant
-    let object
-    if (typeof Class === 'function') {
-      try { object = Class(...args) } catch (error) { /* Simply avoid raising any error */ }
-      try { object = new Class(...args) } catch (error) { /* Simply avoid raising any error */ }
-    } else object = Class
-    return object
-  }
   const mapValue = (value) => {
     if (typeof value === 'object') {
       const type = value.type

diff --git a/map/client/mixins/globe/mixin.base-globe.js b/map/client/mixins/globe/mixin.base-globe.js
@@ -7,7 +7,7 @@ import Cesium from 'cesium/Source/Cesium.js'
 import 'cesium/Source/Widgets/widgets.css'
 import BuildModuleUrl from 'cesium/Source/Core/buildModuleUrl.js'
 import { Geolocation } from '../../geolocation.js'
-import { convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson } from '../../utils.globe.js'
+import { convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
 // Cesium has its own dynamic module loader requiring to be configured
 // Cesium files need to be also added as static assets of the applciation
 BuildModuleUrl.setBaseUrl('/Cesium/')
@@ -54,6 +54,9 @@ export const baseGlobe = {
         terrainProviderViewModels: []
       })
       this.viewer = new Cesium.Viewer(domEl, viewerOptions)
+      const backgroundColor = _.get(viewerOptions, 'backgroundColor')
+      this.viewer.scene.backgroundColor = (backgroundColor ? createCesiumObject('Color', ...backgroundColor) : Cesium.Color.BLACK)
+      if (!_.get(viewerOptions, 'globe', true)) this.viewer.globe.show = false
       // Debug mode ?
       if (viewerOptions.debug) this.viewer.extend(Cesium.viewerCesiumInspectorMixin)
       // Cesium always create a default provider