@kalisio/kdk 2.1.9 → 2.2.0

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

@@ -0,0 +1,41 @@
+// Get the unique global symbol to store event listeners on a leaflet object
+const LISTENERS_KEY = Symbol.for('leaflet-event-listeners')
+
+// Bind a set of events on given Leaflet object to a vue component
+export function bindLeafletEvents (object, events, component, options) {
+  object[LISTENERS_KEY] = []
+  events.forEach(eventName => {
+    const listener = (...args) => {
+      if (options) component.$engineEvents.emit(eventName, options, ...args)
+      else component.$engineEvents.emit(eventName, ...args)
+    }
+    object[LISTENERS_KEY].push(listener)
+    object.on(eventName, listener)
+  })
+}
+
+export function unbindLeafletEvents (object, events) {
+  const listeners = object[LISTENERS_KEY]
+  if (listeners) {
+    events.forEach((eventName, index) => {
+      object.off(eventName, object[LISTENERS_KEY][index])
+    })
+    delete object[LISTENERS_KEY]
+  }
+}
+
+export const LeafletEvents = {
+  Map: ['baselayerchange', 'overlayadd', 'overlayremove', 'layeradd', 'layerremove', 'zoomlevelschange',
+    'resize', 'unload', 'viewreset', 'load',
+    'zoomstart', 'boxzoomstart', 'boxselectionstart', 'movestart',
+    'zoom', 'move',
+    'zoomend', 'boxzoomend', 'boxselectionend', 'moveend',
+    'click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'contextmenu',
+    'keypress', 'preclick', 'moveend', 'zoomanim', 'fullscreenchange'],
+  Popup: ['add', 'remove'],
+  Tooltip: ['add', 'remove'],
+  Layer: ['add', 'remove', 'popupopen', 'popupclose', 'tooltipopen', 'tooltipclose'],
+  Feature: ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'contextmenu',
+    'dragstart', 'dragend', 'drag', 'movestart', 'moveend', 'move'],
+  Cluster: ['spiderfied', 'unspiderfied']
+}

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

@@ -0,0 +1,21 @@
+import _ from 'lodash'
+import { utils as kdkCoreUtils } from '../../../../core/client/index.js'
+
+export function getHtmlTable (properties) {
+  properties = kdkCoreUtils.dotify(properties)
+  properties = _.pickBy(properties, value => !_.isNil(value))
+  const keys = _.keys(properties)
+  let html
+  if (keys.length === 0) return null
+  else if (keys.length === 1) html = _.get(properties, keys[0])
+  else {
+    const borderStyle = ' style="border: 1px solid black; border-collapse: collapse;"'
+    html = '<table' + borderStyle + '>'
+    html += keys
+      .map(key => '<tr' + borderStyle + '><th' +
+        borderStyle + '>' + key + '</th><th>' + _.get(properties, key) + '</th></tr>')
+      .join('')
+    html += '</table>'
+  }
+  return html
+}

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

@@ -0,0 +1,191 @@
+import _ from 'lodash'
+import logger from 'loglevel'
+import chroma from 'chroma-js'
+import moment from 'moment'
+import L from 'leaflet'
+import { Time, Units, utils as kdkCoreUtils } from '../../../../core/client/index.js'
+import { convertStyle, convertSimpleStyleToPointStyle, convertSimpleStyleToLineStyle, convertSimpleStyleToPolygonStyle,
+         PointStyleTemplateMappings, LineStyleTemplateMappings, PolygonStyleTemplateMappings } from '../../utils/utils.style.js'
+import { ShapeMarker } from '../ShapeMarker.js'
+
+L.shapeMarker = function (latlng, options) {
+  return new ShapeMarker(latlng, options)
+}
+
+export const LeafletStyleMappings = {
+  'z-index': 'pane',
+  pane: 'pane',
+  stroke: 'color',
+  'stroke-color': 'color',
+  'stroke-opacity': 'opacity',
+  'stroke-width': 'weight',
+  fill: 'fillColor',
+  'fill-opacity': 'fillOpacity',
+  'fill-color': 'fillColor',
+  weight: 'weight',
+  radius: 'radius',
+  'line-cap': 'lineCap',
+  'line-join': 'lineJoin',
+  'dash-array': 'dashArray',
+  'dash-offset': 'dashOffset',
+  'marker-symbol': 'style.point.shape',
+  'marker-size': 'style.point.size',
+  'marker-color': 'style.point.color',
+  'marker-anchor': 'style.point.anchor',
+  'icon-url': 'style.point.icon.url',
+  'icon-html': 'style.point.html',
+  'icon-color': 'style.point.icon.color',
+  'icon-size': 'style.point.icon.size',
+  'icon-anchor': 'style.point.anchor',
+  'icon-class': 'style.point.icon.classes',
+  'icon-opacity': 'style.point.icon.opacity',
+  'icon-classes': 'style.point.icon.classes',
+  'icon-x-offset': 'style.point.icon.xOffset',
+  'icon-y-offset': 'style.point.icon.yOffset',
+  'style-line-color': 'color',
+  'style-line-width': 'weight',
+  'style-line-opacity': 'opacity',
+  'style-line-cap': 'lineCap',
+  'style-line-join': 'lineJoin',
+  'style-line-dash-array': 'dashArray',
+  'style-line-dash-offset': 'dashOffset',
+  'style-polygon-color': 'fillColor',
+  'style-polygon-opacity': 'fillOpacity',
+  'style-polygon-rule': 'fillRule',
+  'style-polygon-stroke-color': 'color',
+  'style-polygon-stroke-width': 'weight',
+  'style-polygon-stroke-opacity': 'opacity',
+  'style-polygon-stroke-cap': 'lineCap',
+  'style-polygon-stroke-join': 'lineJoin',
+  'style-polygon-stroke-dash-array': 'dashArray',
+  'style-polygon-stroke-dash-offset': 'dashOffset'
+}
+
+const LineStyleToLeafletPath = {
+  color: 'color',
+  width: 'weight',
+  opacity: 'opacity',
+  cap: 'lineCap',
+  join: 'lineJoin',
+  dashArray: 'dashArray',
+  dashOffset: 'dashOffset'
+}
+
+const PolygonStyleToLeafletPath = {
+  color: 'fillColor',
+  opacity: 'fillOpacity',
+  rule: 'fillRule',
+}
+
+// TODO: to be removed when updating 3D style
+export function convertToLeafletFromSimpleStyleSpec (style, inPlace) {
+  if (!style) return {}
+  const leafletStyle = (inPlace ? style : {})
+  // Compute flags first because if updating in place options in style spec will be replaced
+  let isIconSpec = _.has(style, 'icon')
+  // First copy any icon spec as not supported by simple style spec
+  if (isIconSpec) _.set(leafletStyle, 'icon', _.get(style, 'icon'))
+  _.forOwn(style, (value, key) => {
+    if (_.has(LeafletStyleMappings, key)) {
+      const mapping = _.get(LeafletStyleMappings, key)
+      // Specific options
+      switch (key) {
+        case 'marker-size':
+        case 'marker-anchor':
+        case 'icon-anchor':
+          if (!Array.isArray(value)) value = [value, value]
+          _.set(leafletStyle, mapping, value)
+          break
+        default:
+          _.set(leafletStyle, mapping, value)
+      }
+      if (inPlace) _.unset(style, key)
+      // In this case we have a marker with icon spec
+      if (mapping.startsWith('icon')) isIconSpec = true
+    }
+  })
+  if (isIconSpec) {
+    // Select the right marker type based on icon properties if not already set
+    if (!_.has(style, 'marker.type')) {
+      if (_.has(style, 'icon-url') || _.has(style, 'icon-html')) _.set(leafletStyle, 'type', 'marker')
+      else if (_.has(style, 'icon-classes')) _.set(leafletStyle, 'type', 'shapeMarker')
+    }
+  }
+  // Manage panes to make z-index work for all types of layers,
+  // pane name can actually be a z-index value
+  if (_.has(leafletStyle, 'pane')) _.set(leafletStyle, 'pane', _.get(leafletStyle, 'pane').toString())
+  if (_.has(leafletStyle, 'shadowPane')) _.set(leafletStyle, 'shadowPane', _.get(leafletStyle, 'shadowPane').toString())
+  return leafletStyle
+}
+
+export function createMarkerFromPointStyle (latlng, style) {
+  if (!latlng) {
+    logger.warn(`[KDK] 'latlng' should be defined`)
+    return
+  }
+  return L.shapeMarker(latlng, style)
+}
+
+export function convertLineStyleToLeafletPath (style) {
+  if (!style) return
+  let leafletStyle = convertStyle(style, LineStyleToLeafletPath)
+  // handle quasar color/default if needed
+  leafletStyle.color = kdkCoreUtils.getHtmlColor(leafletStyle.color, 'black')
+  return leafletStyle
+}
+
+export function convertPolygonStyleToLeafletPath (style) {
+  if (!style) return
+  let leafletStyle = convertStyle(style, PolygonStyleToLeafletPath)
+  Object.assign(leafletStyle, convertLineStyleToLeafletPath(style.stroke))
+  // handle quasar/default color if needed
+  leafletStyle.fillColor = kdkCoreUtils.getHtmlColor(leafletStyle.fillColor, 'black')
+  return leafletStyle
+}
+
+function processStyle (style, feature, options, mappings) {
+  if (!options) return
+  const leafletOptions = options.leaflet || options
+  // We allow to template style properties according to feature,
+  // because it can be slow you have to specify a subset of properties
+  const context = { properties: feature.properties, feature, chroma, moment, Units, Time }
+  if (leafletOptions.template) {
+    // Create the map of variables
+    if (options.variables) context.variables = _.reduce(options.variables,
+      (result, variable) => Object.assign(result, { [variable.name]: variable }), {})
+    leafletOptions.template.forEach(entry => {
+      _.set(style, _.get(mappings, _.kebabCase(entry.property), entry.property), entry.compiler(context))
+    })
+  }
+  // We manage panes for z-index, so we need to forward it to marker options (only if not already defined)
+  if (leafletOptions.pane && !style.pane) style.pane = leafletOptions.pane
+  if (leafletOptions.shadowPane && !style.shadowPane) style.shadowPane = leafletOptions.shadowPane
+  return style
+}
+
+export function getDefaultPointStyle (feature, options, engine, engineStylePath = 'style.point') {
+  const engineStyle = _.get(engine, engineStylePath, {})
+  const layerStyle = options ? _.get(options.leaflet || options, 'layerPointStyle') : {}
+  const featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPointStyle(feature.properties)
+  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { point: style } }, feature, options, PointStyleTemplateMappings)
+  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 featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToLineStyle(feature.properties)
+  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { line: style } }, feature, options, LineStyleTemplateMappings)
+  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 featureStyle = feature.style ? _.get(feature, 'style', {}) : convertSimpleStyleToPolygonStyle(feature.properties)
+  const style = Object.assign({}, engineStyle, layerStyle, featureStyle)
+  processStyle({ style: { polygon: style } }, feature, options, PolygonStyleTemplateMappings)
+  return convertPolygonStyleToLeafletPath(style)
+}

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

@@ -0,0 +1,87 @@
+export function tile2key (coords) {
+  // JS Number.MAX_SAFE_INTEGER = 2^53 - 1, so 53 bits available
+  // put z value on  5 bits (0 - 32)
+  // put y value on 24 bits (0 - 16777216)
+  // put x value on 24 bits (0 - 16777216)
+  // shift y by 5 bits (* 32)
+  // shift x by 5+24 bits (* 536870912)
+  return (coords.x * 536870912) + (coords.y * 32) + coords.z
+}
+
+export function key2tile (key) {
+  // JS Number.MAX_SAFE_INTEGER = 2^53 - 1, so 53 bits available
+  // put z value on  5 bits (0 - 32)
+  // put y value on 24 bits (0 - 16777216)
+  // put x value on 24 bits (0 - 16777216)
+  // shift y by 5 bits (* 32)
+  // shift x by 5+24 bits (* 536870912)
+  const x = Math.floor(key / 536870912)
+  const y = Math.floor((key - (x * 536870912)) / 32)
+  const p = L.point(x, y)
+  p.z = key - ((x * 536870912) + (y * 32))
+  return p
+}
+
+export function tileSetContainsParent (tileset, coords) {
+  const triplet = {
+    x: coords.x,
+    y: coords.y,
+    z: coords.z
+  }
+  while (triplet.z > 1) {
+    const tilekey = tile2key(triplet)
+    if (tileset.has(tilekey)) return true
+    triplet.x = Math.floor(triplet.x / 2)
+    triplet.y = Math.floor(triplet.y / 2)
+    triplet.z -= 1
+  }
+  return false
+}
+
+export function getParentTileInTileSet (tileset, coords) {
+  const triplet = { 
+    x: coords.x, 
+    y: coords.y, 
+    z: coords.z 
+  }
+
+  triplet.x = Math.floor(triplet.x / 2)
+  triplet.y = Math.floor(triplet.y / 2)
+  triplet.z -= 1
+
+  while (triplet.z > 1) {
+    const tilekey = tile2key(triplet)
+    if (tileset.has(tilekey)) return triplet
+
+    triplet.x = Math.floor(triplet.x / 2)
+    triplet.y = Math.floor(triplet.y / 2)
+    triplet.z -= 1
+  }
+
+  return undefined
+}
+
+export function computeIdealMaxNativeZoom (gridLayer, dataSetBounds, dataSetTileSize) {
+  // compute optimal maxNativeZoom value to ensure
+  // the smallest leaflet tile will approximately match a dataset tile
+
+  // compute tile size farthest from equator
+  const nw = dataSetBounds.getNorthWest()
+  let z = 1
+  while (true) {
+    const nwPoint = gridLayer._map.project(nw, z)
+    const coords = nwPoint.unscaleBy(gridLayer.getTileSize())
+    coords.x = Math.floor(coords.x)
+    coords.y = Math.floor(coords.y)
+    coords.z = z
+
+    const tileBounds = gridLayer._tileCoordsToBounds(coords)
+    const tileWidth = tileBounds.getEast() - tileBounds.getWest()
+    const tileHeight = tileBounds.getNorth() - tileBounds.getSouth()
+    if (tileWidth < dataSetTileSize.lng || tileHeight < dataSetTileSize.lat) break
+
+    z += 1
+  }
+
+  return Math.max(1, z - 1)
+}

package/map/client/map.js

@@ -7,9 +7,11 @@ import init from './init.js'
 const mixins = Object.assign({}, commonMixins, { map: mapMixins })
 
 export * from './geolocation.js'
+export * from './planets.js'
 export { utils }
 export { composables }
 export { mixins }
 export * from '../common/index.js'
+export * from './init.js'
 
 export default init

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

@@ -8,7 +8,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 } from '../../utils.globe.js'
+import { convertCesiumHandlerEvent, isTerrainLayer } 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/')
@@ -81,13 +81,17 @@ export const baseGlobe = {
       processedOptions.cesium.attribution = processedOptions.attribution
       return processedOptions
     },
-    isTerrainLayer (options) {
-      return (options.type === 'Cesium') || (options.type === 'Ellipsoid')
-    },
     createCesiumLayer (options) {
       const cesiumOptions = options.cesium || options
+      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 (this.isTerrainLayer(cesiumOptions)) {
+      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'
@@ -96,9 +100,10 @@ export const baseGlobe = {
       }
       // Handle specific case of built-in creation functions
       const createFunction = 'create' + provider
-      provider = (Cesium[createFunction] ? Cesium[createFunction](cesiumOptions) : new Cesium[provider](cesiumOptions))
+      if (Cesium[provider]) provider = new Cesium[provider](cesiumOptions)
+      else provider = Cesium[createFunction](cesiumOptions)
       // Terrain is directly managed using a provider
-      return (this.isTerrainLayer(cesiumOptions) ? provider : new Cesium.ImageryLayer(provider))
+      return (isTerrainLayer(cesiumOptions) ? provider : new Cesium.ImageryLayer(provider))
     },
     registerCesiumConstructor (constructor) {
       this.cesiumFactory.push(constructor)
@@ -134,7 +139,7 @@ export const baseGlobe = {
       const layer = this.getLayerByName(name)
       if (!layer) return false
       const cesiumLayer = this.getCesiumLayerByName(name)
-      if (this.isTerrainLayer(layer.cesium)) {
+      if (isTerrainLayer(layer)) {
         return this.viewer.terrainProvider === cesiumLayer
       } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
         return this.viewer.scene.imageryLayers.contains(cesiumLayer)
@@ -182,7 +187,7 @@ export const baseGlobe = {
       }
       // Add the cesium layer to the globe
       this.cesiumLayers[name] = cesiumLayer
-      if (this.isTerrainLayer(layer.cesium)) {
+      if (isTerrainLayer(layer)) {
         this.viewer.terrainProvider = cesiumLayer
       } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
         this.viewer.scene.imageryLayers.add(cesiumLayer)
@@ -209,7 +214,7 @@ export const baseGlobe = {
       // Remove the cesium layer from globe
       const cesiumLayer = this.cesiumLayers[name]
       delete this.cesiumLayers[name]
-      if (this.isTerrainLayer(layer.cesium)) {
+      if (isTerrainLayer(layer)) {
         this.viewer.terrainProvider = null
       } else if (cesiumLayer instanceof Cesium.ImageryLayer) {
         this.viewer.scene.imageryLayers.remove(cesiumLayer, false)
@@ -419,19 +424,22 @@ export const baseGlobe = {
           // If feature have been lost at import try to recreate it in order to be compatible with 2D
           if (!emittedEvent.target.feature) {
             let feature = { type: 'Feature' }
-            // FIXME: Generate GeoJson feature if possible (requires Cesium 1.59)
+            /* FIXME: Generate GeoJson feature if possible (requires Cesium 1.59)
+               However this does not work yet and could be too much slow
             if (typeof Cesium.exportKml === 'function') {
-              const kmlEntities = Cesium.exportKml({ entities: [emittedEvent.target] })
-              const geoJson = kml(kmlEntities)
+              const selection = new Cesium.EntityCollection()
+              selection.add(emittedEvent.target)
+              const kmlEntities = await Cesium.exportKml({ entities: selection, modelCallback: () => '' })
+              const geoJson = kml(kmlEntities.kml)
               if (geoJson.features.length > 0) feature = geoJson.features[0]
-            } else {
-              const position = Cesium.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)]
-              }
+            }
+            */
+            const position = Cesium.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)]
             }
             feature.properties = (emittedEvent.target.properties ? emittedEvent.target.properties.getValue(0) : {})
             emittedEvent.target.feature = feature