8341 Leader line property - a line that connect the mark, icon, model…

… or label to ground in 3D view (geosolutions-it#8797)

* geosolutions-it#8341 Leader line property - a line that connect the mark, icon, model or label to ground in 3D view

* update documentation

docs/developer-guide/maps-configuration.md

@@ -858,69 +858,117 @@ example:
 
 Available logical operators:
 
-- `||` OR operator
-- `&&` AND operator
+| Operator | Description |
+| --- | --- |
+| `\|\|` | OR operator |
+| `&&` | AND operator |
 
 Available comparison operators:
 
-- `==` equal to
-- `*=` like (for string type)
-- `!=` is not
-- `<` less than
-- `<=` less and equal than
-- `>` grater than
-- `>=` grater and equal than
+| Operator | Description |
+| --- | --- |
+| `==` | equal to |
+| `*=` | like (for string type) |
+| `!=` | is not |
+| `<` | less than |
+| `<=` | less and equal than |
+| `>` | grater than |
+| `>=` | grater and equal than |
 
 The `symbolizer` could be of following `kinds`:
 
 - `Mark` symbolizer properties
- - `kind` must be equal to `Mark`
- - `color` fill color of the mark
- - `fillOpacity` fill opacity of the mark
- - `strokeColor` stroke color of the mark
- - `strokeOpacity` stroke opacity of the mark
- - `strokeWidth` stroke width of the mark
- - `radius` radius size in px of the mark
- - `msBringToFront` this boolean will allow setting the `disableDepthTestDistance` value for the feature. This would only apply on Cesium maps.
- - `wellKnownName` rendered shape, one of Circle, Square, Triangle, Star, Cross, X, shape://vertline, shape://horline, shape://slash, shape://backslash, shape://dot, shape://plus, shape://times, shape://oarrow or shape://carrow
+
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Mark** | x | x |
+ | `color` | fill color of the mark | x | x |
+ | `fillOpacity` | fill opacity of the mark | x | x |
+ | `strokeColor` | stroke color of the mark | x | x |
+ | `strokeOpacity` | stroke opacity of the mark | x | x |
+ | `strokeWidth` | stroke width of the mark | x | x |
+ | `radius` | radius size in px of the mark | x | x |
+ | `wellKnownName` | rendered shape, one of Circle, Square, Triangle, Star, Cross, X, shape://vertline, shape://horline, shape://slash, shape://backslash, shape://dot, shape://plus, shape://times, shape://oarrow or shape://carrow | x | x |
+ | `msBringToFront` | this boolean will allow setting the **disableDepthTestDistance** value for the feature. This would | | x |
+ | `msHeightReference` | reference to compute the distance of the point geometry, one of **none**, **ground** or **clamp** | | x |
+ | `msHeight` | height of the point, the original geometry is applied if undefined | | x |
+ | `msLeaderLineColor` | color of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineOpacity` | opacity of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineWidth` | width of the leading line connecting the point to the terrain | | x |
 
 - `Icon` symbolizer properties
- - `kind` must be equal to `Icon`
- - `image` url of the image to use as icon
- - `size` size of the icon
- - `opacity` opacity of the icon
- - `rotate` rotation of the icon
- - `msBringToFront` this boolean will allow setting the `disableDepthTestDistance` value for the feature. This would only apply on Cesium maps.
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Icon** | x | x |
+ | `image` | url of the image to use as icon | x | x |
+ | `size` | size of the icon | x | x |
+ | `opacity` | opacity of the icon | x | x |
+ | `rotate` | rotation of the icon | x | x |
+ | `msBringToFront` | this boolean will allow setting the **disableDepthTestDistance** value for the feature. This would | | x |
+ | `msHeightReference` | reference to compute the distance of the point geometry, one of **none**, **ground** or **clamp** | | x |
+ | `msHeight` | height of the point, the original geometry is applied if undefined | | x |
+ | `msLeaderLineColor` | color of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineOpacity` | opacity of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineWidth` | width of the leading line connecting the point to the terrain | | x |
 
 - `Line` symbolizer properties
- - `kind` must be equal to `Line`
- - `color` stroke color of the line
- - `opacity` stroke opacity of the line
- - `width` stroke width of the line
- - `dasharray` array that represent the dashed line intervals
- - `msClampToGround` this boolean will allow setting the `clampToGround` value for the feature. This would only apply on Cesium maps.
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Line** | x | x |
+ | `color` | stroke color of the line | x | x |
+ | `opacity` | stroke opacity of the line | x | x |
+ | `width` | stroke width of the line | x | x |
+ | `dasharray` | array that represent the dashed line intervals | x | x |
+ | `msClampToGround` | this boolean will allow setting the **clampToGround** value for the feature. This would only apply on Cesium maps. | | x |
 
 - `Fill` symbolizer properties
- - `kind` must be equal to `Fill`
- - `color` fill color of the polygon
- - `fillOpacity` fill opacity of the polygon
- - `outlineColor` outline color of the polygon
- - `outlineOpacity` outline opacity of the polygon
- - `outlineWidth` outline width of the polygon
- - `msClassificationType` allow setting `classificationType` value for the feature. This would only apply on polygon graphics in Cesium maps.
- - `msClampToGround` this boolean will allow setting the `clampToGround` value for the feature. This would only apply on Cesium maps.
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Fill** | x | x |
+ | `color` | fill color of the polygon | x | x |
+ | `fillOpacity` | fill opacity of the polygon | x | x |
+ | `outlineColor` | outline color of the polygon | x | x |
+ | `outlineOpacity` | outline opacity of the polygon | x | x |
+ | `outlineWidth` | outline width of the polygon | x | x |
+ | `msClassificationType` | allow setting **classificationType** value for the feature. This would only apply on polygon graphics in Cesium maps. | | x |
+ | `msClampToGround` | this boolean will allow setting the **clampToGround** value for the feature. This would only apply on Cesium maps. | | x |
 
 - `Text` symbolizer properties
- - `kind` must be equal to `Text`
- - `label` text to show in the label, the {{propertyKey}} notetion allow to access feature properties (eg. 'feature name is {{name}}')
- - `font` array of font family names
- - `size` font size of the label
- - `fontStyle` font style of the label: normal or italic
- - `fontWeight` font style of the label: normal or bold
- - `color` font color of the label
- - `haloColor` halo color of the label
- - `haloWidth` halo width of the label
- - `offset` array of x and y values offset of the label
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Text** | x | x |
+ | `label` | text to show in the label, the {{propertyKey}} notetion allow to access feature properties (eg. 'feature name is {{name}}') | x | x |
+ | `font` | array of font family names | x | x |
+ | `size` | font size of the label | x | x |
+ | `fontStyle` | font style of the label: normal or italic | x | x |
+ | `fontWeight` | font style of the label: normal or bold | x | x |
+ | `color` | font color of the label | x | x |
+ | `haloColor` | halo color of the label | x | x |
+ | `haloWidth` | halo width of the label | x | x |
+ | `offset` | array of x and y values offset of the label | x | x |
+ | `msBringToFront` | this boolean will allow setting the **disableDepthTestDistance** value for the feature. This would | | x |
+ | `msHeightReference` | reference to compute the distance of the point geometry, one of **none**, **ground** or **clamp** | | x |
+ | `msHeight` | height of the point, the original geometry is applied if undefined | | x |
+ | `msLeaderLineColor` | color of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineOpacity` | opacity of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineWidth` | width of the leading line connecting the point to the terrain | | x |
+
+- `Model` symbolizer properties (custom symbolizer to visualize 3D model as point geometries)
+ | Property | Description | 2D | 3D |
+ | --- | --- | --- | --- |
+ | `kind` | must be equal to **Model** | | x |
+ | `model` | url of a 3D .glb file | | x |
+ | `heading` | heading rotation | | x |
+ | `pitch` | pitch rotation | | x |
+ | `roll` | roll rotation | | x |
+ | `scale` | scale factor | | x |
+ | `color` | color mixed with the mesh texture/material | | x |
+ | `opacity` | color opacity | | x |
+ | `msHeightReference` | reference to compute the distance of the point geometry, one of **none**, **ground** or **clamp** | | x |
+ | `msHeight` | height of the point, the original geometry is applied if undefined | | x |
+ | `msLeaderLineColor` | color of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineOpacity` | opacity of the leading line connecting the point to the terrain | | x |
+ | `msLeaderLineWidth` | width of the leading line connecting the point to the terrain | | x |
 
 #### Legacy Vector Style (deprecated)
 

web/client/components/map/cesium/plugins/VectorLayer.js

@@ -45,8 +45,9 @@ const createLayer = (options, map) => {
  entities: dataSource?.entities?.values,
  map,
  opacity: options.opacity ?? 1
+ }).then(() => {
+ map.scene.requestRender();
  });
- map.scene.requestRender();
  }
  });
  });
@@ -92,8 +93,9 @@ Layers.registerType('vector', {
  entities: layer.dataSource.entities.values,
  map,
  opacity: newOptions.opacity ?? 1
+ }).then(() => {
+ map.scene.requestRender();
  });
- map.scene.requestRender();
  }
  });
  });

web/client/components/map/cesium/plugins/WFSLayer.js

@@ -60,8 +60,9 @@ const createLayer = (options, map) => {
  entities: dataSource?.entities?.values,
  map,
  opacity: options.opacity ?? 1
+ }).then(() => {
+ map.scene.requestRender();
  });
- map.scene.requestRender();
  }
  });
  });
@@ -110,8 +111,9 @@ Layers.registerType('wfs', {
  entities: layer.dataSource.entities.values,
  map,
  opacity: newOptions.opacity ?? 1
+ }).then(() => {
+ map.scene.requestRender();
  });
- map.scene.requestRender();
  }
  });
  });

web/client/components/styleeditor/config/blocks.js

@@ -40,6 +40,17 @@ const heightPoint3dOptions = {
  ...numberAttributes
  ];
  }
+ }),
+ msLeaderLineColor: property.color({
+ key: 'msLeaderLineColor',
+ opacityKey: 'msLeaderLineOpacity',
+ label: 'styleeditor.leaderLineColor',
+ stroke: true
+ }),
+ msLeaderLineWidth: property.width({
+ key: 'msLeaderLineWidth',
+ label: 'styleeditor.leaderLineWidth',
+ fallbackValue: 0
  })
 };
 

web/client/translations/data.de-DE.json

@@ -2439,7 +2439,9 @@
  "pitch": "Rotation der X-Achse",
  "roll": "Drehung der Y-Achse",
  "color": "Farbe",
- "pointHeight": "Punkthöhe"
+ "pointHeight": "Punkthöhe",
+ "leaderLineColor": "Farbe der Führungslinie",
+ "leaderLineWidth": "Breite der Führungslinie"
  },
  "playback": {
  "settings": {

web/client/translations/data.en-US.json

@@ -2412,7 +2412,9 @@
  "pitch": "X axis rotation",
  "roll": "Y axis rotation",
  "color": "Color",
- "pointHeight": "Point height"
+ "pointHeight": "Point height",
+ "leaderLineColor": "Leader line color",
+ "leaderLineWidth": "Leader line width"
  },
  "playback": {
  "settings": {

web/client/translations/data.es-ES.json

@@ -2401,7 +2401,9 @@
  "pitch": "Rotación del eje X",
  "roll": "Rotación del eje Y",
  "color": "Color",
- "pointHeight": "Altura del punto"
+ "pointHeight": "Altura del punto",
+ "leaderLineColor": "Color de línea de guía",
+ "leaderLineWidth": "Ancho de la línea guía"
  },
  "playback": {
  "settings": {

web/client/translations/data.fr-FR.json

@@ -2402,7 +2402,9 @@
  "pitch": "Rotation de l'axe X",
  "roll": "Rotation de l'axe Y",
  "color": "Couleur",
- "pointHeight": "Hauteur du point"
+ "pointHeight": "Hauteur du point",
+ "leaderLineColor": "Couleur de la ligne de repère",
+ "leaderLineWidth": "Largeur de la ligne de repère"
  },
  "playback": {
  "settings": {

web/client/translations/data.it-IT.json

@@ -2403,7 +2403,9 @@
  "pitch": "Rotazione asse X",
  "roll": "Rotazione asse Y",
  "color": "Colore",
- "pointHeight": "Altezza punto"
+ "pointHeight": "Altezza punto",
+ "leaderLineColor": "Colore linea guida",
+ "leaderLineWidth": "Spessore linea guida"
  },
  "playback": {
  "settings": {

web/client/utils/MapInfoUtils.js

@@ -121,10 +121,14 @@ export const clickedPointToGeoJson = (clickedPoint) => {
  : [])
  ]
  },
+ properties: {
+ id: 'get-feature-info-point'
+ },
  style: [{
  iconUrl,
  iconAnchor: [12, 41], // in leaflet there is no anchor in fraction
- iconSize: [25, 41]
+ iconSize: [25, 41],
+ leaderLine: clickedPoint.height !== undefined
  }]
 
  }

web/client/utils/VectorStyleUtils.js

@@ -721,7 +721,9 @@ function msStyleToSymbolizer(style, feature) {
  fontWeight: style.fontWeight,
  color: style.fillColor,
  haloColor: style.color,
- haloWidth: 1
+ haloWidth: 1,
+ msHeightReference: 'none',
+ msBringToFront: true
  });
  }
  if (style.symbolizerKind === 'Mark') {
@@ -734,7 +736,8 @@ function msStyleToSymbolizer(style, feature) {
  strokeWidth: style.weight,
  radius: style.radius ?? 10,
  wellKnownName: 'Circle',
- msHeightReference: 'none'
+ msHeightReference: 'none',
+ msBringToFront: true
  });
  }
  if (isAttrPresent(style, ['iconUrl']) && !style.iconGlyph && !style.iconShape) {
@@ -744,7 +747,14 @@ function msStyleToSymbolizer(style, feature) {
  size: max(style.iconSize || [32]),
  opacity: 1,
  rotate: 0,
- msHeightReference: 'none'
+ msHeightReference: 'none',
+ msBringToFront: true,
+ // only needed for get feature info marker
+ ...(style.leaderLine && {
+ msLeaderLineColor: '#333333',
+ msLeaderLineOpacity: 1,
+ msLeaderLineWidth: 1
+ })
  });
  }
  if (isMarkerStyle(style)) {
@@ -754,7 +764,8 @@ function msStyleToSymbolizer(style, feature) {
  size: 45,
  opacity: 1,
  rotate: 0,
- msHeightReference: 'none'
+ msHeightReference: 'none',
+ msBringToFront: true
  });
  }
  if (isSymbolStyle(style)) {
@@ -771,7 +782,8 @@ function msStyleToSymbolizer(style, feature) {
  size: style.size,
  opacity: 1,
  rotate: 0,
- msHeightReference: 'none'
+ msHeightReference: 'none',
+ msBringToFront: true
  };
  })
  .catch(() => ({}));