@kalisio/kdk 2.2.2 → 2.3.1

package/map/client/mixins/globe/mixin.base-globe.js

@@ -3,14 +3,15 @@ import sift from 'sift'
 import logger from 'loglevel'
 import Emitter from 'tiny-emitter'
 import { getCssVar } from 'quasar'
-import Cesium from 'cesium/Source/Cesium.js'
+import { Ion, Viewer, Color, viewerCesiumInspectorMixin, Rectangle, ScreenSpaceEventType, ScreenSpaceEventHandler, buildModuleUrl,
+         Cesium3DTileset, ImageryLayer, Cartesian3, PinBuilder, BoundingSphere, Ellipsoid, Cartographic, Entity, EntityCollection,
+         exportKml, VerticalOrigin, Math as CesiumMath } from 'cesium'
 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'
-// 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/')
+import { Cesium, convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
+// The URL on our server where CesiumJS's static files are hosted
+window.CESIUM_BASE_URL = '/Cesium/'
+buildModuleUrl.setBaseUrl('/Cesium/')
 
 export const baseGlobe = {
   emits: [
@@ -45,25 +46,35 @@ export const baseGlobe = {
           animation: false,
           timeline: false
         })
-      if (token) Cesium.Ion.defaultAccessToken = token
+      if (token) Ion.defaultAccessToken = token
       // If we don't need ion
-      else Cesium.Ion.defaultAccessToken = ''
+      else Ion.defaultAccessToken = ''
       // Initialize the globe
       Object.assign(viewerOptions, {
         imageryProviderViewModels: [],
         terrainProviderViewModels: []
       })
-      this.viewer = new Cesium.Viewer(domEl, viewerOptions)
-      // Cesium always create a default provider
-      this.viewer.scene.imageryLayers.removeAll()
+      this.viewer = new Viewer(domEl, viewerOptions)
+      const backgroundColor = _.get(viewerOptions, 'backgroundColor')
+      this.viewer.scene.backgroundColor = (backgroundColor ? createCesiumObject('Color', ...backgroundColor) : Color.BLACK)
+      if (this.viewer.scene.globe) {
+        const baseColor = _.get(viewerOptions, 'baseColor')
+        this.viewer.scene.globe.baseColor = (baseColor ? createCesiumObject('Color', ...baseColor) : Color.BLACK)
+        const undergroundColor = _.get(viewerOptions, 'undergroundColor')
+        this.viewer.scene.globe.undergroundColor = (undergroundColor ? createCesiumObject('Color', ...undergroundColor) : Color.BLACK)
+      }
+      // Debug mode ?
+      if (viewerOptions.debug) this.viewer.extend(viewerCesiumInspectorMixin)
+      // Cesium always create a default provider when a globe is used
+      if (this.viewer.scene.imageryLayers) this.viewer.scene.imageryLayers.removeAll()
       // Add defaults handler
       this.registerCesiumHandler(this.getDefaultPickHandler, 'MOUSE_MOVE')
       this.registerCesiumHandler(this.getDefaultPickHandler, 'LEFT_CLICK')
       this.registerCesiumHandler(this.getDefaultPickHandler, 'RIGHT_CLICK')
       // Remove default Cesium handlers
-      this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
-      this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
-      this.viewBounds = new Cesium.Rectangle()
+      this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
+      this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
+      this.viewBounds = new Rectangle()
       this.onGlobeReady()
     },
     onGlobeReady () {
@@ -74,47 +85,68 @@ export const baseGlobe = {
       // Because we update objects in place and don't want cesium internal objects to be reactive
       const processedOptions = _.cloneDeep(options)
       // Transform from string to actual object
-      processedOptions.cesium.iconUrl = Cesium.buildModuleUrl(processedOptions.iconUrl)
+      processedOptions.cesium.iconUrl = buildModuleUrl(processedOptions.iconUrl)
       // Copy generic options
       processedOptions.cesium.name = processedOptions.name
       processedOptions.cesium.attribution = processedOptions.attribution
       return processedOptions
     },
-    createCesiumLayer (options) {
-      const cesiumOptions = options.cesium || options
+    async createCesiumLayer (options) {
+      let cesiumOptions = options.cesium || options
+      // Convert required objects
+      cesiumOptions = this.convertToCesiumObjects(cesiumOptions)
+      let args = [cesiumOptions]
+      let provider, createFunction, isImageryProvider
       if (cesiumOptions.type === '3DTileset') {
-        const convertedOptions = this.convertToCesiumObjects(cesiumOptions)
-        const tileset = new Cesium.Cesium3DTileset(_.omit(convertedOptions, ['style']))
-        // Not possible to get style as constructor options
-        if (_.has(convertedOptions, 'style')) tileset.style = _.get(convertedOptions, 'style')
-        return tileset
-      }
-      let provider
-      if (isTerrainLayer(cesiumOptions)) {
-        if (cesiumOptions.url || (cesiumOptions.type === 'Ellipsoid')) provider = cesiumOptions.type + 'TerrainProvider'
-        // If no url given will use default terrain creation function createWorldTerrain()
-        else provider = 'WorldTerrain'
+        provider = createFunction = 'Cesium3DTileset.fromUrl'
+        args = [cesiumOptions.url].concat([_.omit(cesiumOptions, ['url', 'style'])])
+      } else if (isTerrainLayer(cesiumOptions)) {
+        if (cesiumOptions.type === 'Ellipsoid') {
+          provider = 'EllipsoidTerrainProvider'
+        } else if (cesiumOptions.url || cesiumOptions.assetId) {
+          provider = createFunction = (cesiumOptions.url ? 'CesiumTerrainProvider.fromUrl' : 'CesiumTerrainProvider.fromIonAssetId')
+          args = [cesiumOptions.url || cesiumOptions.assetId].concat([_.omit(cesiumOptions, ['url', 'assetId'])])
+        } else {
+          // If no url/asset id given will use default terrain creation function createWorldTerrainAsync()
+          provider = createFunction = 'createWorldTerrainAsync'
+        }
       } else {
-        provider = cesiumOptions.type + 'ImageryProvider'
+        provider = cesiumOptions.type
+        // Handle specific case of built-in creation functions
+        createFunction = `create${provider}Async`
+        if (_.get(Cesium, createFunction)) {
+          provider = createFunction
+        } else {
+          isImageryProvider = true
+          provider += 'ImageryProvider'
+          // Some providers also have built-in creation functions
+          createFunction = `${provider}.fromUrl`
+          if (_.get(Cesium, createFunction)) {
+            provider = createFunction
+            args = [cesiumOptions.url].concat([_.omit(cesiumOptions, ['url'])])
+          }
+        }
       }
-      // Handle specific case of built-in creation functions
-      const createFunction = 'create' + provider
-      if (Cesium[provider]) provider = new Cesium[provider](cesiumOptions)
-      else provider = Cesium[createFunction](cesiumOptions)
-      // Terrain is directly managed using a provider
-      return (isTerrainLayer(cesiumOptions) ? provider : new Cesium.ImageryLayer(provider))
+      const Constructor = _.get(Cesium, provider)
+      if (!Constructor) return
+      // Built-in creation function or class constructor ?
+      if (provider === createFunction) provider = await Constructor(...args)
+      else provider = new Constructor(...args)
+      // Not possible to set style as constructor options for tile sets
+      if ((cesiumOptions.type === '3DTileset') && _.has(cesiumOptions, 'style')) provider.style = _.get(cesiumOptions, 'style')
+      return (isImageryProvider ? new ImageryLayer(provider) : provider)
     },
     registerCesiumConstructor (constructor) {
       this.cesiumFactory.push(constructor)
     },
     registerCesiumHandler (handler, eventType) {
-      if (!this.cesiumHandler) this.cesiumHandler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
+      if (!this.cesiumHandler) this.cesiumHandler = new ScreenSpaceEventHandler(this.viewer.scene.canvas)
       const originalEvent = convertCesiumHandlerEvent(eventType)
       this.cesiumHandler.setInputAction((event) => handler(Object.assign(event, { originalEvent })),
-        Cesium.ScreenSpaceEventType[eventType])
+        ScreenSpaceEventType[eventType])
     },
     unregisterCesiumHandler (eventType) {
-      this.cesiumHandlers.removeInputAction(Cesium.ScreenSpaceEventType[eventType])
+      this.cesiumHandler.removeInputAction(ScreenSpaceEventType[eventType])
     },
     async createLayer (options) {
       const processedOptions = this.processCesiumLayerOptions(options)
@@ -126,7 +158,7 @@ export const baseGlobe = {
         if (layer) break
       }
       // Use default Cesium layer constructor if none found
-      layer = layer || this.createCesiumLayer(processedOptions)
+      layer = layer || await this.createCesiumLayer(processedOptions)
       // Keep track of processed options
       layer.processedOptions = processedOptions
       return layer
@@ -140,9 +172,9 @@ export const baseGlobe = {
       const cesiumLayer = this.getCesiumLayerByName(name)
       if (isTerrainLayer(layer)) {
         return this.viewer.terrainProvider === cesiumLayer
-      } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
+      } else if (cesiumLayer instanceof ImageryLayer) {
         return this.viewer.scene.imageryLayers.contains(cesiumLayer)
-      } else if (cesiumLayer instanceof Cesium.Cesium3DTileset) {
+      } else if (cesiumLayer instanceof Cesium3DTileset) {
         return this.viewer.scene.primitives.contains(cesiumLayer) && cesiumLayer.show
       } else { // Entity data source otherwise
         return this.viewer.dataSources.contains(cesiumLayer)
@@ -188,9 +220,9 @@ export const baseGlobe = {
       this.cesiumLayers[name] = cesiumLayer
       if (isTerrainLayer(layer)) {
         this.viewer.terrainProvider = cesiumLayer
-      } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
+      } else if (cesiumLayer instanceof ImageryLayer) {
         this.viewer.scene.imageryLayers.add(cesiumLayer)
-      } else if (cesiumLayer instanceof Cesium.Cesium3DTileset) {
+      } else if (cesiumLayer instanceof Cesium3DTileset) {
         cesiumLayer.show = true
         if (!this.viewer.scene.primitives.contains(cesiumLayer)) this.viewer.scene.primitives.add(cesiumLayer)
       } else { // Entity data source otherwise
@@ -215,9 +247,9 @@ export const baseGlobe = {
       delete this.cesiumLayers[name]
       if (isTerrainLayer(layer)) {
         this.viewer.terrainProvider = null
-      } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
+      } else if (cesiumLayer instanceof ImageryLayer) {
         this.viewer.scene.imageryLayers.remove(cesiumLayer, false)
-      } else if (cesiumLayer instanceof Cesium.Cesium3DTileset) {
+      } else if (cesiumLayer instanceof Cesium3DTileset) {
         cesiumLayer.show = false
       } else { // Entity data source otherwise
         this.viewer.dataSources.remove(cesiumLayer, true)
@@ -263,7 +295,7 @@ export const baseGlobe = {
       // If it was visible hide it first (ie remove from globe)
       this.hideLayer(name)
       const cesiumLayer = this.cesiumLayers[name]
-      if (cesiumLayer instanceof Cesium.Cesium3DTileset) {
+      if (cesiumLayer instanceof Cesium3DTileset) {
         this.viewer.scene.primitives.remove(cesiumLayer)
       }
       // Delete the layer
@@ -284,16 +316,21 @@ export const baseGlobe = {
       const geoJson = await convertEntitiesToGeoJson(layer.entities)
       return geoJson
     },
-    zoomToBounds (bounds) {
+    zoomToBounds (bounds, heading = 0, pitch = -90, roll = 0, duration = 0) {
       this.viewer.camera.flyTo({
-        duration: 0,
         destination: Array.isArray(bounds) // Assume Cesium rectangle object if not array
-          ? Cesium.Rectangle.fromDegrees(bounds[0][1], bounds[0][0], bounds[1][1], bounds[1][0])
-          : bounds
+          ? Rectangle.fromDegrees(bounds[0][1], bounds[0][0], bounds[1][1], bounds[1][0])
+          : bounds,
+        orientation: {
+          heading: CesiumMath.toRadians(heading),
+          pitch: CesiumMath.toRadians(pitch),
+          roll: CesiumMath.toRadians(roll)
+        },
+        duration
       })
     },
-    zoomToBBox (bbox) {
-      this.zoomToBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]])
+    zoomToBBox (bbox, heading = 0, pitch = -90, roll = 0, duration = 0) {
+      this.zoomToBounds([[bbox[1], bbox[0]], [bbox[3], bbox[2]]], heading, pitch, roll, duration)
     },
     zoomToLayer (name) {
       const layer = this.getCesiumLayerByName(name)
@@ -311,33 +348,35 @@ export const baseGlobe = {
         }
       }
     },
-    center (longitude, latitude, altitude, heading = 0, pitch = -90, roll = 0) {
+    center (longitude, latitude, altitude, heading = 0, pitch = -90, roll = 0, options = {}) {
       const center = this.viewer.camera.positionCartographic
+      const duration = _.get(options, 'duration', 0)
       const target = {
-        destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, altitude || center.height),
+        destination: Cartesian3.fromDegrees(longitude, latitude, altitude || center.height),
         orientation: {
-          heading: Cesium.Math.toRadians(heading),
-          pitch: Cesium.Math.toRadians(pitch),
-          roll: Cesium.Math.toRadians(roll)
-        }
+          heading: CesiumMath.toRadians(heading),
+          pitch: CesiumMath.toRadians(pitch),
+          roll: CesiumMath.toRadians(roll)
+        },
+        duration
       }
-      if (this.viewer.clock.shouldAnimate) this.viewer.camera.flyTo(target)
+      if (duration) this.viewer.camera.flyTo(target)
       else this.viewer.camera.setView(target)
     },
     getCenter () {
       const center = this.viewer.camera.positionCartographic
       return {
-        longitude: Cesium.Math.toDegrees(center.longitude),
-        latitude: Cesium.Math.toDegrees(center.latitude),
+        longitude: CesiumMath.toDegrees(center.longitude),
+        latitude: CesiumMath.toDegrees(center.latitude),
         altitude: center.height
       }
     },
     getBounds () {
       const bounds = this.viewer.camera.computeViewRectangle(this.viewer.scene.globe.ellipsoid, this.viewBounds)
-      const south = Cesium.Math.toDegrees(bounds.south)
-      const west = Cesium.Math.toDegrees(bounds.west)
-      const north = Cesium.Math.toDegrees(bounds.north)
-      const east = Cesium.Math.toDegrees(bounds.east)
+      const south = CesiumMath.toDegrees(bounds.south)
+      const west = CesiumMath.toDegrees(bounds.west)
+      const north = CesiumMath.toDegrees(bounds.north)
+      const east = CesiumMath.toDegrees(bounds.east)
       return [[south, west], [north, east]]
     },
     async showUserLocation () {
@@ -345,14 +384,14 @@ export const baseGlobe = {
         const longitude = Geolocation.getLongitude()
         const latitude = Geolocation.getLatitude()
         this.center(longitude, latitude)
-        const pinBuilder = new Cesium.PinBuilder()
-        const canvas = await pinBuilder.fromMakiIconId('marker', Cesium.Color.fromCssColorString(getCssVar('primary')), 48)
+        const pinBuilder = new PinBuilder()
+        const canvas = await pinBuilder.fromMakiIconId('marker', Color.fromCssColorString(getCssVar('primary')), 48)
         this.userLocationEntity = this.viewer.entities.add({
           name: 'user-location',
-          position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+          position: Cartesian3.fromDegrees(longitude, latitude),
           billboard: {
             image: canvas.toDataURL(),
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+            verticalOrigin: VerticalOrigin.BOTTOM
           }
         })
         this.viewer.selectedEntity = this.userLocationEntity
@@ -399,11 +438,13 @@ export const baseGlobe = {
       let position = entity.position
       if (!position) {
         if (entity.polygon) {
-          position = Cesium.BoundingSphere.fromPoints(entity.polygon.hierarchy.getValue().positions).center
+          position = BoundingSphere.fromPoints(entity.polygon.hierarchy.getValue().positions).center
         } else if (entity.polyline) {
-          position = Cesium.BoundingSphere.fromPoints(entity.polyline.positions.getValue()).center
+          position = BoundingSphere.fromPoints(entity.polyline.positions.getValue()).center
+        } else if (entity.wall) {
+          position = BoundingSphere.fromPoints(entity.wall.positions.getValue()).center
         }
-        Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(position, position)
+        if (position) Ellipsoid.WGS84.scaleToGeodeticSurface(position, position)
       }
       return position
     },
@@ -414,9 +455,9 @@ export const baseGlobe = {
       if (pickedPosition) {
         // This is for 3D handlers
         emittedEvent.pickedPosition = pickedPosition
-        pickedPosition = Cesium.Cartographic.fromCartesian(pickedPosition)
-        const longitude = Cesium.Math.toDegrees(pickedPosition.longitude)
-        const latitude = Cesium.Math.toDegrees(pickedPosition.latitude)
+        pickedPosition = Cartographic.fromCartesian(pickedPosition)
+        const longitude = CesiumMath.toDegrees(pickedPosition.longitude)
+        const latitude = CesiumMath.toDegrees(pickedPosition.latitude)
         // This ensure we can use similar handlers than for Leaflet
         emittedEvent.latlng = [latitude, longitude]
         emittedEvent.latlng.lng = longitude
@@ -425,7 +466,7 @@ export const baseGlobe = {
       const pickedObject = this.viewer.scene.pick(event.endPosition || event.position)
       if (pickedObject) {
         emittedEvent.target = pickedObject.id || pickedObject.primitive.id
-        if (emittedEvent.target instanceof Cesium.Entity) {
+        if (emittedEvent.target instanceof Entity) {
           // If feature have been lost at import try to recreate it in order to be compatible with 2D
           // We attach it to the target entity so that we won't compute it each time the mouse move
           // FIXME: should it be a problem with real-time updates ?
@@ -437,8 +478,8 @@ export const baseGlobe = {
               type: 'Feature'
             }
             // Generate GeoJson feature if possible (requires Cesium 1.59)
-            if (typeof Cesium.exportKml === 'function') {
-              const selection = new Cesium.EntityCollection()
+            if (typeof exportKml === 'function') {
+              const selection = new EntityCollection()
               selection.add(emittedEvent.target)
               const geoJson = await convertEntitiesToGeoJson(selection)
               if (geoJson.features.length > 0) {
@@ -446,12 +487,12 @@ export const baseGlobe = {
               }
             }
             if (!feature.geometry) {
-              const position = Cesium.Cartographic.fromCartesian(emittedEvent.target.position
+              const position = Cartographic.fromCartesian(emittedEvent.target.position
                 ? emittedEvent.target.position.getValue(0)
                 : emittedEvent.pickedPosition)
               feature.geometry = {
                 type: 'Point',
-                coordinates: [Cesium.Math.toDegrees(position.longitude), Cesium.Math.toDegrees(position.latitude)]
+                coordinates: [CesiumMath.toDegrees(position.longitude), CesiumMath.toDegrees(position.latitude)]
               }
             }
             feature.properties = (emittedEvent.target.properties ? emittedEvent.target.properties.getValue(0) : {})

package/map/client/mixins/globe/mixin.file-layers.js

@@ -1,11 +1,11 @@
 import _ from 'lodash'
-import Cesium from 'cesium/Source/Cesium.js'
+import { viewerDragDropMixin } from 'cesium'
 import logger from 'loglevel'
 
 export const fileLayers = {
   mounted () {
     this.$engineEvents.on('globe-ready', () => {
-      this.viewer.extend(Cesium.viewerDragDropMixin,
+      this.viewer.extend(viewerDragDropMixin,
         // For activities
         _.get(this, 'activityOptions.engine.fileLayers', {
           clearOnDrop: false,

package/map/client/mixins/globe/mixin.geojson-layers.js

@@ -1,4 +1,4 @@
-import Cesium from 'cesium/Source/Cesium.js'
+import { GeoJsonDataSource, ColorMaterialProperty, ConstantProperty } from 'cesium'
 import _ from 'lodash'
 import logger from 'loglevel'
 import sift from 'sift'
@@ -26,12 +26,15 @@ function updateGeoJsonEntity(source, destination) {
 }
 
 export const geojsonLayers = {
+  emits: [
+    'layer-updated'
+  ],
   methods: {
     convertFromSimpleStyleOrDefaults (properties) {
       let { stroke, strokeWidth, fill } = convertToCesiumFromSimpleStyle(properties)
-      if (!stroke) stroke = Cesium.GeoJsonDataSource.stroke
-      if (!strokeWidth) strokeWidth = Cesium.GeoJsonDataSource.strokeWidth
-      if (!fill) fill = Cesium.GeoJsonDataSource.fill
+      if (!stroke) stroke = GeoJsonDataSource.stroke
+      if (!strokeWidth) strokeWidth = GeoJsonDataSource.strokeWidth
+      if (!fill) fill = GeoJsonDataSource.fill
       return { stroke, strokeWidth, fill }
     },
     async loadGeoJson (dataSource, geoJson, options, updateOptions = {}) {
@@ -49,7 +52,7 @@ export const geojsonLayers = {
         return
       }
       // We use a separated source in order to load data otherwise Cesium will replace previous ones, causing flickering
-      const loadingDataSource = new Cesium.GeoJsonDataSource()
+      const loadingDataSource = new GeoJsonDataSource()
       loadingDataSource.notFromDrop = true
       await loadingDataSource.load(geoJson, cesiumOptions)
       // Now we process loaded entities to merge with existing ones if any or add new ones
@@ -91,10 +94,10 @@ export const geojsonLayers = {
             ellipse: {
               semiMinorAxis: radius,
               semiMajorAxis: radius,
-              material: new Cesium.ColorMaterialProperty(fill),
-              outlineColor: new Cesium.ConstantProperty(stroke),
+              material: new ColorMaterialProperty(fill),
+              outlineColor: new ConstantProperty(stroke),
               outlineWidth: strokeWidth,
-              outline: new Cesium.ConstantProperty(true)
+              outline: new ConstantProperty(true)
             }
           })
           entitiesToRemove.push(entity)
@@ -114,10 +117,10 @@ export const geojsonLayers = {
             properties: entity.properties.getValue(0),
             wall: {
               positions: entity.polyline.positions.getValue(0),
-              material: new Cesium.ColorMaterialProperty(fill),
-              outlineColor: new Cesium.ConstantProperty(stroke),
+              material: new ColorMaterialProperty(fill),
+              outlineColor: new ConstantProperty(stroke),
               outlineWidth: strokeWidth,
-              outline: new Cesium.ConstantProperty(true)
+              outline: new ConstantProperty(true)
             }
           })
         }
@@ -139,8 +142,8 @@ export const geojsonLayers = {
             properties: entity.properties.getValue(0),
             label: {
               text,
-              fillColor: new Cesium.ConstantProperty(fill),
-              outlineColor: new Cesium.ConstantProperty(stroke),
+              fillColor: new ConstantProperty(fill),
+              outlineColor: new ConstantProperty(stroke),
               outlineWidth: strokeWidth
             }
           })
@@ -208,12 +211,9 @@ export const geojsonLayers = {
         feature.id = getFeatureId(feature, options)
         // We cannot access data outside the properties object of a feature in Cesium
         // As a consequence we copy back any style information inside
-        const styleType = getFeatureStyleType(feature)
         // We need to convert to simple-style spec as cesium manages this only
-        let simpleStyle
-        if (styleType === 'point') simpleStyle = getPointSimpleStyle(feature, options, engine)
-        else if (styleType === 'line') simpleStyle = getLineSimpleStyle(feature, options, engine)
-        else simpleStyle = getPolygonSimpleStyle(feature, options, engine)
+        // We also need to merge all styling properties as some entities requires eg both line/polygon style (wall polylines)
+        const simpleStyle = Object.assign(getPointSimpleStyle(feature, options, engine), getLineSimpleStyle(feature, options, engine), getPolygonSimpleStyle(feature, options, engine))
         if (!feature.properties) feature.properties = simpleStyle
         else Object.assign(feature.properties, simpleStyle)
       }
@@ -279,7 +279,7 @@ export const geojsonLayers = {
       }
       // If we already have a source we simply use it otherwise we create/load it
       if (!dataSource || !dataSource.name) {
-        dataSource = new Cesium.GeoJsonDataSource()
+        dataSource = new GeoJsonDataSource()
         dataSource.notFromDrop = true
         // Check for realtime layers
         if (cesiumOptions.realtime) {
@@ -322,6 +322,11 @@ export const geojsonLayers = {
       if (isInMemoryLayer(baseLayer)) {
         this.geojsonCache[name] = geoJson
       }
+      this.onLayerUpdated(baseLayer, layer, { features: geoJson.features || [geoJson] })
+    },
+    onLayerUpdated (layer, cesiumLayer, data) {
+      this.$emit('layer-updated', layer, cesiumLayer, data)
+      this.$engineEvents.emit('layer-updated', layer, cesiumLayer, data)
     },
     onCurrentTimeChangedGeoJsonLayers (time) {
       const geoJsonlayers = _.values(this.layers).filter(sift({

package/map/client/mixins/globe/mixin.globe-activity.js

@@ -1,4 +1,4 @@
-import Cesium from 'cesium/Source/Cesium.js'
+import { Fullscreen } from 'cesium'
 
 export const activity = {
   methods: {
@@ -28,10 +28,10 @@ export const activity = {
     onToggleVr () {
       // VR requires fullscreen mode
       if (this.viewer.scene.useWebVR) {
-        if (Cesium.Fullscreen.fullscreen) Cesium.Fullscreen.exitFullscreen()
+        if (Fullscreen.fullscreen) Fullscreen.exitFullscreen()
         this.viewer.scene.useWebVR = false
       } else {
-        if (!Cesium.Fullscreen.fullscreen) Cesium.Fullscreen.requestFullscreen(document.body)
+        if (!Fullscreen.fullscreen) Fullscreen.requestFullscreen(document.body)
         this.viewer.scene.useWebVR = true
       }
     }

package/map/client/mixins/globe/mixin.opendap-layers.js

@@ -1,5 +1,5 @@
 // import logger from 'loglevel'
-import Cesium from 'cesium/Source/Cesium.js'
+import { Resource, Cesium3DTileset } from 'cesium'
 
 export const opendapLayers = {
   methods: {
@@ -10,7 +10,7 @@ export const opendapLayers = {
 
       const urlPromise = async () => {
         const accessToken = await this.$api.passport.getJWT()
-        const url = new Cesium.Resource({
+        const url = new Resource({
           url: 'http://localhost:8081/api/daptiles/tileset.json',
           headers: {
             Authorization: `Bearer ${accessToken}`
@@ -26,7 +26,7 @@ export const opendapLayers = {
         return url
       }
 
-      const tileset = new Cesium.Cesium3DTileset({
+      const tileset = new Cesium3DTileset({
         url: urlPromise
         // url: 'http://127.0.0.1:3000/tileset.json?file=mf-arpege-05/2019/06/16/18/T6086_G_T_Sol_20190616180000.grib&variable=Temperature_surface&time=0',
         // shadows: Cesium.ShadowMode.DISABLED,

package/map/client/mixins/globe/mixin.style.js

@@ -1,4 +1,4 @@
-import Cesium from 'cesium/Source/Cesium.js'
+import { Transforms, Math as CesiumMath, HeadingPitchRoll, Ellipsoid } from 'cesium'
 import _ from 'lodash'
 import chroma from 'chroma-js'
 import moment from 'moment'
@@ -60,13 +60,13 @@ export const style = {
           // Handle specific case of orientation
           if ((property === 'orientation') && entity.position) {
             const localFrameAxes = _.get(entityStyle, 'localFrameAxes', ['east', 'north'])
-            const localFrame = Cesium.Transforms.localFrameToFixedFrameGenerator(...localFrameAxes)
+            const localFrame = Transforms.localFrameToFixedFrameGenerator(...localFrameAxes)
             const position = entity.position.getValue(this.viewer.clock.currentTime)
             // From heading, pitch, roll as templated string to quaternion
-            value = value.split(',').map(angle => Cesium.Math.toRadians(parseFloat(angle)))
-            value = new Cesium.HeadingPitchRoll(...value)
+            value = value.split(',').map(angle => CesiumMath.toRadians(parseFloat(angle)))
+            value = new HeadingPitchRoll(...value)
             // Then from local to position frame
-            value = Cesium.Transforms.headingPitchRollQuaternion(position, value, Cesium.Ellipsoid.WGS84, localFrame)
+            value = Transforms.headingPitchRollQuaternion(position, value, Ellipsoid.WGS84, localFrame)
           }
           _.set(entityStyle, property, value)
         })

package/map/client/mixins/globe/mixin.tooltip.js

@@ -11,9 +11,11 @@ export const tooltip = {
         if (tooltip) {
           // Default tooltip position (can change in sticky mode)
           const position = this.getPositionForEntity(entity)
-          const tooltipEntity = this.viewer.entities.add({ parent: entity, position, label: tooltip })
-          // This option is not cesium specific so we have to manage it manually
-          if (tooltip.sticky) tooltipEntity.sticky = true
+          if (position) {
+            const tooltipEntity = this.viewer.entities.add({ parent: entity, position, label: tooltip })
+            // This option is not cesium specific so we have to manage it manually
+            if (tooltip.sticky) tooltipEntity.sticky = true
+          }
         }
       }
     },