@kalisio/kdk 2.4.1 → 2.5.1

package/map/client/leaflet/utils/utils.geojson.js

@@ -0,0 +1,221 @@
+import L from 'leaflet'
+import _ from 'lodash'
+import 'leaflet-realtime'
+import { lineOffset } from '@turf/turf'
+import { GradientPath, buildSVGOverlayFromGradientPath } from '../GradientPath.js'
+
+// Override default remove handler for leaflet-realtime due to
+// https://github.com/perliedman/leaflet-realtime/issues/177
+const Realtime = L.Realtime.extend({
+  remove: function (geojson) {
+    if (typeof geojson === 'undefined') {
+      return L.Layer.prototype.remove.call(this)
+    } else {
+      return L.Realtime.prototype.remove.call(this, geojson)
+    }
+  }
+})
+L.realtime = function (src, options) {
+  return new Realtime(src, options)
+}
+// Override default Polyline simplify function to manage offset
+const simplifyPoints = L.Polyline.prototype._simplifyPoints
+L.Polyline.include({
+  _simplifyPoints: function () {
+    simplifyPoints.call(this)
+    // Offset simplified version 
+    if (this.options.offset) {
+      // We'd like to ensure a pixel constant offset when zooming
+      // Zoom 0 resolution is 156 543 m/pixel at equator in default map tiles,
+      // we take latitude into account to account for a convergence factor
+      const latitude = this.getBounds().getCenter().lat
+      const factor = 156543 / Math.pow(2, this._map.getZoom()) / Math.cos(latitude * Math.PI / 180)
+      const offset = Math.max(1, this.options.offset * factor)
+
+      for (let i = 0; i < this._parts.length; i++) {
+        let latLngs = this._parts[i].map(point => this._map.layerPointToLatLng(point))
+        // Ensure a large enough precision for computation (defaults to 6 in Leaflet)
+        const coords = L.GeoJSON.latLngsToCoords(latLngs, 0, false, 12)
+        const feature = lineOffset({ type: 'LineString', coordinates: coords }, offset, { units: 'meters' })
+        latLngs = L.GeoJSON.coordsToLatLngs(feature.geometry.coordinates, 0)
+        this._parts[i] = latLngs.map(latlng => this._map.latLngToLayerPoint(latlng))
+      }
+    }
+  }
+})
+
+// Override default Leaflet GeoJson utility to manage some specific use cases
+const geometryToLayer = L.GeoJSON.geometryToLayer
+L.GeoJSON.geometryToLayer = function (geojson, options) {
+  const geometry = geojson.geometry
+  const properties = geojson.properties
+  if (geometry && properties && properties.geodesic) {
+    if (geometry.type === 'LineString') {
+      return new L.Geodesic([L.GeoJSON.coordsToLatLngs(geometry.coordinates, 0)],
+        Object.assign({ steps: 4 }, options.style(geojson)))
+    } else if (geometry.type === 'MultiLineString') {
+      const coords = geometry.coordinates.map((lineString) => L.GeoJSON.coordsToLatLngs(lineString, 0))
+      return new L.Geodesic(coords, Object.assign({ steps: 4 }, options.style(geojson)))
+    } else if (geometry.type === 'Point') {
+      const layer = new L.GeodesicCircle(L.GeoJSON.coordsToLatLng(geometry.coordinates),
+        Object.assign({ fill: true, steps: 360, radius: properties.radius }, options.style(geojson)))
+      return layer
+    }
+  }
+  if (geometry && properties && properties.gradient) {
+    if (geometry.type === 'LineString') {
+      const style = options.style(geojson)
+      return properties.svg ? buildSVGOverlayFromGradientPath(geojson, style) : new GradientPath(geojson, style)
+    }
+  }
+  if (geometry && properties && properties.mask) {
+    if (geometry.type === 'Polygon' || geometry.type === 'MultiPolygon') {
+      return new MaskLayer(geojson, options.style(geojson))
+    }
+  }// Automate Leaflet.PolylineOffset plugin use
+  if (geometry && properties && properties.offset) {
+    if (geometry.type === 'LineString') {
+      options = Object.assign({ offset: properties.offset }, options)
+    }
+  }
+  // As we do so this breaks leaflet-arrowheads plugin
+  const layer = geometryToLayer(geojson, options)
+  if (geometry && (options.arrowheads || (properties && properties.arrowheads))) {
+    if (layer instanceof L.Polyline) layer.arrowheads(options.arrowheads || properties.arrowheads)
+  }
+  
+  return layer
+}
+
+export function getUpdateFeatureFunction(leafletOptions) {
+  const updateFeature = (feature, oldLayer) => {
+    // A new feature is coming, create it
+    if (!oldLayer) return
+    const oldType = _.get(oldLayer, 'feature.geometry.type')
+    const type = _.get(feature, 'geometry.type')
+    // The feature is changing its geometry type, recreate it
+    if (type !== oldType) return
+    const staticGeometry = _.get(leafletOptions, 'staticGeometry', false)
+    // Keep track of previous geometry if we don't want to update it
+    // Indeed, styling might depend on it
+    if (staticGeometry) feature.geometry = _.get(oldLayer, 'feature.geometry')
+    // Now update coordinates if not static geometry
+    if (staticGeometry) return oldLayer
+    // An existing one is found, simply update styling, properties, etc.
+    leafletOptions.onEachFeature(feature, oldLayer)
+    if (oldLayer.setStyle) {
+      // Some vector layers can be used for points, eg circleMarker,
+      // in this case we use marker styling instead of lines/polygons styling
+      if (feature.geometry.type === 'Point') {
+        // FIXME: updating style in place does not seem to work, so for now we recreate the whole marker
+        // oldLayer.setStyle(leafletOptions.pointToLayer(feature))
+        return
+      } else {
+        // Updating style in place does not seem to work when involving panes
+        if (_.get(oldLayer.feature, 'style.pane') !== _.get(feature, 'style.pane')) return
+        else oldLayer.setStyle(leafletOptions.style(feature))
+      }
+    }
+    // We want to restore values that were there till now but are missing from the input feature.
+    // Deep for time and runtime that might contain objects with variables
+    _.defaultsDeep(feature, _.pick(oldLayer.feature, ['time', 'runTime']))
+    // _NOT_ deep for properties, otherwise it'll merge array and object properties between the two
+    const oldProps = _.get(oldLayer.feature, 'properties')
+    if (oldProps) {
+      if (!feature.properties) feature.properties = {}
+      _.defaults(feature.properties, oldProps)
+    }
+    if (oldLayer.setIcon) {
+      // FIXME: updating icon in place requires to recreate it anyway, so for now we recreate the whole marker
+      // oldLayer.setIcon(_.get(leafletOptions.pointToLayer(feature, oldLayer.getLatLng()), 'options.icon'))
+      return
+    }
+    const coordinates = feature.geometry.coordinates
+    // FIXME: support others geometry types ?
+    switch (type) {
+      case 'Point':
+        oldLayer.setLatLng(L.GeoJSON.coordsToLatLngs(coordinates))
+        break
+      case 'LineString':
+      case 'MultiLineString':
+        if (typeof oldLayer.setData === 'function') {
+          // Support Gradient Path
+          oldLayer.setData(feature)
+        } else if (feature.properties.geodesic) {
+          // Support geodesic line & linestrings
+          const latlngs = type === 'LineString'
+            ? [L.GeoJSON.coordsToLatLngs(coordinates, 0)]
+            : coordinates.map((linestring) => L.GeoJSON.coordsToLatLngs(linestring, 0))
+          oldLayer.setLatLngs(latlngs)
+        } else {
+          oldLayer.setLatLngs(L.GeoJSON.coordsToLatLngs(coordinates, type === 'LineString' ? 0 : 1))
+        }
+        break
+      case 'Polygon':
+      case 'MultiPolygon':
+        oldLayer.setLatLngs(L.GeoJSON.coordsToLatLngs(coordinates, type === 'Polygon' ? 1 : 2))
+        break
+    }
+    return oldLayer
+  }
+  
+  return updateFeature
+}
+
+export const GeoJsonLeafletLayerFilters = {
+  // Filter to identify layers that require an update at a given frequency
+  TimeUpdate: {
+    // Possible for realtime layers only
+    'leaflet.type': 'geoJson',
+    'leaflet.realtime': true,
+    $or: [ // Supported by template URL or time-based features service
+      { 'leaflet.sourceTemplate': { $exists: true } },
+      { service: { $exists: true } }
+    ],
+    // Skip layers powered by realtime service events
+    serviceEvents: { $ne: true },
+    // Skip invisible layers
+    isVisible: true
+  },
+  // Filter to identify layers with variables affected by a unit change
+  UnitUpdate: {
+    'leaflet.type': 'geoJson',
+    'leaflet.realtime': true,
+    // Not sure why but this does not seem to work with sift
+    //'variables': { $elemMatch: { unit: { $in: units } } },
+    'variables': { $exists: true },
+    isVisible: true,
+    $or: [{
+      'leaflet.style': { $exists: true },
+      'leaflet.template': { $exists: true }
+    }, {
+      'leaflet.tooltip.template': { $exists: true }
+    }]
+  },
+  // Filter to identify layers with tooltip defining a minZoom/maxZoom
+  // thus affected by a zoom change
+  TooltipUpdate: {
+    'leaflet.type': 'geoJson',
+    'leaflet.realtime': true,
+    isVisible: true,
+    // Supported by permanent tooltips only
+    'leaflet.tooltip.options.permanent': true,
+    $or: [
+      { 'leaflet.tooltip.minZoom': { $exists: true } },
+      { 'leaflet.tooltip.maxZoom': { $exists: true } }
+    ]
+  }
+}
+
+export function hasUnitInLeafletLayerTemplate(units, layer) {
+  const unit = _.intersection(units, _.map(layer.variables, 'unit'))
+  if (_.isEmpty(unit)) return false
+  if (_.get(layer, 'leaflet.tooltip.template', '').includes('Units')) return true
+  for (const template of layer.leaflet.template) {
+    if (template.startsWith('style.')) {
+      const style = _.get(layer.leaflet, template)
+      if ((typeof style === 'string') && style.includes('Units')) return true
+    }
+  }
+  return false
+}

package/map/client/leaflet/utils/utils.style.js

@@ -140,7 +140,8 @@ export function convertLineStyleToLeafletPath (style) {
 export function convertPolygonStyleToLeafletPath (style) {
   if (!style) return
   let leafletStyle = convertStyle(style, PolygonStyleToLeafletPath)
-  Object.assign(leafletStyle, convertLineStyleToLeafletPath(style.stroke))
+  if (style.stroke) Object.assign(leafletStyle, convertLineStyleToLeafletPath(style.stroke))
+  else leafletStyle.stroke = false
   // handle quasar/default color if needed
   leafletStyle.fillColor = kdkCoreUtils.getHtmlColor(leafletStyle.fillColor, 'black')
   return leafletStyle
@@ -165,8 +166,8 @@ function processStyle (style, feature, options, mappings) {
 
   // visibility attribute can be used to hide individual features
   // visibility is true by default but can also be a string when it's
-  // a result of a lodash steing template evaluation
-  let visibility = _.get(style, 'style.visibility', true)
+  // a result of a lodash string template evaluation
+  let visibility = _.get(style, `style.${type}.visibility`, _.get(style, 'style.visibility', true))
   if (typeof visibility === 'string') visibility = visibility === 'true'
   // The 'kdk-hidden-features' pane is created when the leaflet map is initialized
   if (!visibility) _.set(style, `style.${type}.pane`, 'kdk-hidden-features')
@@ -182,26 +183,26 @@ function processStyle (style, feature, options, mappings) {
 export function getDefaultPointStyle (feature, options, engine, engineStylePath = 'style.point') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPointStyle') : {}
+  const templateStyle = processStyle({ style: { point: _.merge({}, engineStyle, layerStyle) } }, feature, options, PointStyleTemplateMappings)
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { point: style } }, feature, options, PointStyleTemplateMappings)
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.point : {}, featureStyle)
   return style
 }
 
 export function getDefaultLineStyle (feature, options, engine, engineStylePath = 'style.line') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerLineStyle') : {}
+  const templateStyle = processStyle({ style: { line: _.merge({}, engineStyle, layerStyle) } }, feature, options, LineStyleTemplateMappings)
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { line: style } }, feature, options, LineStyleTemplateMappings)
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.line : {}, featureStyle)
   return convertLineStyleToLeafletPath(style)
 }
 
 export function getDefaultPolygonStyle (feature, options, engine, engineStylePath = 'style.polygon') {
   const engineStyle = _.get(engine, engineStylePath, {})
   const layerStyle = options ? _.get(options.leaflet || options, 'layerPolygonStyle') : {}
+  const templateStyle = processStyle({ style: { polygon: _.merge({}, engineStyle, layerStyle) } }, feature, options, PolygonStyleTemplateMappings)
   const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
-  const style = _.merge({}, engineStyle, layerStyle, featureStyle)
-  processStyle({ style: { polygon: style } }, feature, options, PolygonStyleTemplateMappings)
+  const style = _.merge({}, engineStyle, layerStyle, templateStyle ? templateStyle.style.polygon : {}, featureStyle)
   return convertPolygonStyleToLeafletPath(style)
 }

package/map/client/map.js

@@ -1,6 +1,7 @@
 import * as composables from './composables/index.js'
 import * as commonMixins from './mixins/index.js'
 import * as mapMixins from './mixins/map/index.js'
+import * as hooks from './hooks/index.js'
 import * as utils from './utils.map.js'
 import init from './init.js'
 
@@ -8,6 +9,8 @@ const mixins = Object.assign({}, commonMixins, { map: mapMixins })
 
 export * from './geolocation.js'
 export * from './planets.js'
+export * from './navigator.js'
+export { hooks }
 export { utils }
 export { composables }
 export { mixins }

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

@@ -9,6 +9,8 @@ import { Ion, Viewer, Color, viewerCesiumInspectorMixin, Rectangle, ScreenSpaceE
 import 'cesium/Source/Widgets/widgets.css'
 import { Geolocation } from '../../geolocation.js'
 import { Cesium, convertCesiumHandlerEvent, isTerrainLayer, convertEntitiesToGeoJson, createCesiumObject } from '../../utils.globe.js'
+import { generateLayerDefinition } from '../../utils/utils.layers.js'
+
 // The URL on our server where CesiumJS's static files are hosted
 window.CESIUM_BASE_URL = '/Cesium/'
 buildModuleUrl.setBaseUrl('/Cesium/')
@@ -29,23 +31,24 @@ export const baseGlobe = {
   methods: {
     refreshGlobe () {
     },
-    setupGlobe (domEl, token, options) {
-      this.viewerOptions = options ||
-        // For activities
-        _.get(this, 'activityOptions.engine.viewer', {
-          sceneMode: 3, // SceneMode.COLUMBUS_VIEW = 1, SceneMode.SCENE3D = 3,
-          sceneModePicker: false,
-          infoBox: false,
-          scene3DOnly: true,
-          homeButton: false,
-          geocoder: false,
-          navigationHelpButton: false,
-          baseLayerPicker: false,
-          vrButton: false,
-          fullscreenButton: false,
-          animation: false,
-          timeline: false
-        })
+    setupGlobe (domEl, token, options = {}) {
+      this.viewerOptions = _.defaults(options, _.get(this, 'activityOptions.engine.viewer', {}), {
+        sceneMode: 3, // SceneMode.COLUMBUS_VIEW = 1, SceneMode.SCENE3D = 3,
+        sceneModePicker: false,
+        infoBox: false,
+        scene3DOnly: true,
+        homeButton: false,
+        geocoder: false,
+        navigationHelpButton: false,
+        baseLayer: false,
+        baseLayerPicker: false,
+        vrButton: false,
+        fullscreenButton: false,
+        animation: false,
+        timeline: false,
+        depthTestAgainstTerrain: false,
+        cameraMoveEventPercentage: 0.2
+      })
       if (token) Ion.defaultAccessToken = token
       // If we don't need ion
       else Ion.defaultAccessToken = ''
@@ -55,6 +58,7 @@ export const baseGlobe = {
         terrainProviderViewModels: []
       })
       this.viewer = new Viewer(domEl, this.viewerOptions)
+      this.viewer.scene.globe.depthTestAgainstTerrain = _.get(this.viewerOptions, 'depthTestAgainstTerrain', false)
       const backgroundColor = _.get(this.viewerOptions, 'backgroundColor')
       this.viewer.scene.backgroundColor = (backgroundColor ? createCesiumObject('Color', ...backgroundColor) : Color.BLACK)
       if (this.viewer.scene.globe) {
@@ -63,8 +67,24 @@ export const baseGlobe = {
         const undergroundColor = _.get(this.viewerOptions, 'undergroundColor')
         this.viewer.scene.globe.undergroundColor = (undergroundColor ? createCesiumObject('Color', ...undergroundColor) : Color.BLACK)
       }
+
+      // Cesium pre-render callback used to update moving materials (animated walls/corridors)
+      this.viewer.scene.preRender.addEventListener(() => {
+        if (!this.cesiumMaterials) return
+        _.forEach(this.cesiumMaterials, m => {
+          if (!m.material.uniforms.offset) return
+          if (!m.startTime) m.startTime = Date.now()
+
+          const elapsed = (Date.now() - m.startTime) * 0.001
+          if (m.animationSpeed) {
+            const loopDuration = (m.length / m.material.uniforms.repeat.x) / m.animationSpeed
+            m.material.uniforms.offset.x = (elapsed % loopDuration) / loopDuration
+          }
+        })
+      })
+
       // Debug mode ?
-      //this.viewerOptions.debug = true
+      // this.viewerOptions.debug = true
       if (this.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()
@@ -72,6 +92,10 @@ export const baseGlobe = {
       this.registerCesiumHandler(this.getDefaultPickHandler, 'MOUSE_MOVE')
       this.registerCesiumHandler(this.getDefaultPickHandler, 'LEFT_CLICK')
       this.registerCesiumHandler(this.getDefaultPickHandler, 'RIGHT_CLICK')
+      this.viewer.camera.moveStart.addEventListener(this.onCameraMoveStart)
+      this.viewer.camera.moveEnd.addEventListener(this.onCameraMoveEnd)
+      this.viewer.camera.percentageChanged = this.viewerOptions.cameraMoveEventPercentage
+      this.viewer.camera.changed.addEventListener(this.onCameraChanged)
       // Remove default Cesium handlers
       this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
       this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
@@ -227,6 +251,9 @@ export const baseGlobe = {
         cesiumLayer.show = true
         if (!this.viewer.scene.primitives.contains(cesiumLayer)) this.viewer.scene.primitives.add(cesiumLayer)
       } else { // Entity data source otherwise
+        // Handle potential custom primitives
+        for (const [id, custom] of cesiumLayer.primitives)
+          custom.primitive.show = true
         this.viewer.dataSources.add(cesiumLayer)
       }
       layer.isVisible = true
@@ -253,6 +280,9 @@ export const baseGlobe = {
       } else if (cesiumLayer instanceof Cesium3DTileset) {
         cesiumLayer.show = false
       } else { // Entity data source otherwise
+        // Hide custom primitives before removing the data source
+        for (const [id, custom] of cesiumLayer.primitives)
+          custom.primitive.show = false
         this.viewer.dataSources.remove(cesiumLayer, true)
       }
       this.onLayerHidden(layer, cesiumLayer)
@@ -277,6 +307,16 @@ export const baseGlobe = {
       this.$emit('layer-added', layer)
       this.$engineEvents.emit('layer-added', layer)
     },
+    async addGeoJsonLayer (layerSpec, geoJson) {
+      if (!generateLayerDefinition(layerSpec, geoJson)) return
+      // Create an empty layer
+      await this.addLayer(layerSpec)
+      // Update the layer with the geoJson content
+      await this.updateLayer(layerSpec.name, geoJson)
+      // Zoom to the layer
+      if (geoJson.bbox) this.zoomToBBox(geoJson.bbox)
+      else this.zoomToLayer(layerSpec.name)
+    },
     renameLayer (previousName, newName) {
       const layer = this.getLayerByName(previousName)
       const cesiumLayer = this.getCesiumLayerByName(previousName)
@@ -312,6 +352,13 @@ export const baseGlobe = {
       Object.keys(this.layers).forEach((layer) => this.removeLayer(layer))
     },
     async toGeoJson (name) {
+      if (!this.isLayerVisible(name)) {
+        // Only lookup geojson cache when layer is not visible
+        // otherwise use toGeoJSON() on the layer to get most up to date content.
+        const cachedGeojson = this.geojsonCache[name]
+        if (cachedGeojson) return cachedGeojson
+      }
+
       const layer = this.getCesiumLayerByName(name)
       if (!layer.entities) return
       const geoJson = await convertEntitiesToGeoJson(layer.entities)
@@ -390,7 +437,7 @@ export const baseGlobe = {
       if (this.viewerOptions.debug) {
         const baseQuaternion = Transforms.headingPitchRollQuaternion(destination, orientation, Ellipsoid.WGS84, Transforms.eastNorthUpToFixedFrame)
         const cameraQuaternion = Transforms.headingPitchRollQuaternion(this.viewer.camera.positionWC,
-        new HeadingPitchRoll(this.viewer.camera.heading, this.viewer.camera.pitch, this.viewer.camera.roll), Ellipsoid.WGS84, Transforms.eastNorthUpToFixedFrame)
+          new HeadingPitchRoll(this.viewer.camera.heading, this.viewer.camera.pitch, this.viewer.camera.roll), Ellipsoid.WGS84, Transforms.eastNorthUpToFixedFrame)
         if (this.baseFrameDebug) {
           this.baseFrameDebug.modelMatrix = Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(baseQuaternion), destination)
           this.finalFrameDebug.modelMatrix = Matrix4.fromRotationTranslation(Matrix3.fromQuaternion(cameraQuaternion), this.viewer.camera.positionWC)
@@ -434,6 +481,17 @@ export const baseGlobe = {
       const east = CesiumMath.toDegrees(bounds.east)
       return [[south, west], [north, east]]
     },
+    getCamera () {
+      const position = this.viewer.camera.positionCartographic
+      return {
+        longitude: CesiumMath.toDegrees(position.longitude),
+        latitude: CesiumMath.toDegrees(position.latitude),
+        altitude: position.height,
+        heading: CesiumMath.toDegrees(this.viewer.camera.heading),
+        pitch: CesiumMath.toDegrees(this.viewer.camera.pitch),
+        roll: CesiumMath.toDegrees(this.viewer.camera.roll)
+      }
+    },
     onEntityTracked (time) {
       if (this.viewerOptions.debug) {
         if (this.trackedFrameDebug) {
@@ -603,11 +661,80 @@ export const baseGlobe = {
       }
       // Mimic Leaflet events
       this.$engineEvents.emit(event.originalEvent.name, options, emittedEvent)
+    },
+    getCameraEllipsoidTarget () {
+      const windowPosition = new Cesium.Cartesian2(this.viewer.container.clientWidth / 2, this.viewer.container.clientHeight / 2)
+      const pickedPosition = this.viewer.camera.pickEllipsoid(windowPosition)
+      if (!pickedPosition) return null
+      const pickedPositionCartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(pickedPosition)
+      return {
+        longitude: CesiumMath.toDegrees(pickedPositionCartographic.longitude),
+        latitude: CesiumMath.toDegrees(pickedPositionCartographic.latitude),
+        altitude: pickedPositionCartographic.height
+      }
+    },
+    onCameraMoveStart () {
+      let target = this.getCameraEllipsoidTarget()
+      if (target) {
+        target = { latlng: { lng: target.longitude, lat: target.latitude }, altitude: target.altitude }
+      }
+      // Mimic Leaflet events
+      this.$engineEvents.emit('movestart', this.viewerOptions, target)
+    },
+    onCameraMoveEnd () {
+      let target = this.getCameraEllipsoidTarget()
+      if (target) {
+        target = { latlng: { lng: target.longitude, lat: target.latitude }, altitude: target.altitude }
+      }
+      // Mimic Leaflet events
+      this.$engineEvents.emit('moveend', this.viewerOptions, target)
+    },
+    onCameraChanged () {
+      let target = this.getCameraEllipsoidTarget()
+      if (target) {
+        target = { latlng: { lng: target.longitude, lat: target.latitude }, altitude: target.altitude }
+      }
+      // Mimic Leaflet events
+      this.$engineEvents.emit('move', this.viewerOptions, target)
+    },
+    getPostProcessStage (effect) {
+      return this.cesiumPostProcessStages[effect]
+    },
+    setupPostProcess (effect, options = { enabled: true }) {
+      let stage = this.cesiumPostProcessStages[effect]
+      if (options.enabled) {
+        if (!stage) {
+          if (effect === 'desaturation') {
+            const fs = `
+    uniform sampler2D colorTexture;
+    in vec2 v_textureCoordinates;
+    void main() {
+        vec4 color = texture(colorTexture, v_textureCoordinates);
+        if (czm_selected()) {
+            out_FragColor = color;
+        } else {
+            out_FragColor = vec4(czm_saturation(color.rgb, 0.0), color.a);
+        }
+    }
+    `
+            stage = this.viewer.scene.postProcessStages.add(new Cesium.PostProcessStage({ fragmentShader: fs }))
+            stage.selected = [] // Initialize empty selected set for postprocess.
+            this.cesiumPostProcessStages[effect] = stage
+          }
+        }
+      } else {
+        if (stage) {
+          this.viewer.scene.postProcessStages.remove(stage)
+          delete this.cesiumPostProcessStages[effect]
+        }
+      }
     }
   },
   created () {
     this.cesiumLayers = {}
     this.cesiumFactory = []
+    this.cesiumMaterials = []
+    this.cesiumPostProcessStages = {}
     // TODO: no specific marker, just keep status
     this.userLocation = false
     // Internal event bus
@@ -615,6 +742,11 @@ export const baseGlobe = {
   },
   beforeUnmount () {
     this.clearLayers()
+    this.viewer.camera.moveStart.removeEventListener(this.onCameraMoveStart)
+    this.viewer.camera.moveEnd.removeEventListener(this.onCameraMoveEnd)
+    this.unregisterCesiumHandler('MOUSE_MOVE')
+    this.unregisterCesiumHandler('LEFT_CLICK')
+    this.unregisterCesiumHandler('RIGHT_CLICK')
   },
   unmounted () {
     this.viewer.destroy()