From cee8231a41193f5c05a216d48ca1fcb07e15f5d0 Mon Sep 17 00:00:00 2001 From: Johann Levesque Date: Mon, 6 Jan 2025 16:49:41 -0500 Subject: [PATCH] fix doc and zoom extent --- .../geoview-core/public/locales/en/guide.md | 16 ++-- .../geoview-core/public/locales/fr/guide.md | 16 ++-- .../templates/demos/demo-function-event.html | 4 +- .../layer/gv-layers/raster/gv-esri-dynamic.ts | 86 ++++++++++++------- 4 files changed, 77 insertions(+), 45 deletions(-) diff --git a/packages/geoview-core/public/locales/en/guide.md b/packages/geoview-core/public/locales/en/guide.md index abd62b4500f..0939fdf52e7 100644 --- a/packages/geoview-core/public/locales/en/guide.md +++ b/packages/geoview-core/public/locales/en/guide.md @@ -209,6 +209,8 @@ The _Layers_ tab has the following submenu options: #### ![]({{assetsURL}}/img/guide/footer/view_25.svg) View +_**Note: Click on a layer to display its Layer information in the right section.**_ + The _View_ submenu option under the _Layers_ tab consists of two sections. The left section lists all the layers displayed on the map. Click on a layer and the right section lists will show the layer settings (available options for that layer). **Layer Icons** @@ -297,10 +299,10 @@ To remove a layer, click on the delete icon ![]({{assetsURL}}/img/guide/layers/r ### ![]({{assetsURL}}/img/guide/sidebar/details_30.svg) Details [Top](#footerSection) -The **Details** tab has two sections. The available layers for the map are listed in the left section, and the feature details for each layer are displayed in the right section. - _**Note: A feature on the map must be selected to enable the layer in the list. Otherwise layers are disabled (greyed out).**_ +The **Details** tab has two sections. The available layers for the map are listed in the left section, and the feature details for each layer are displayed in the right section. + Click on a layer to see its feature details. The number of features for the selected layer is shown in the upper left of the details section. @@ -316,6 +318,8 @@ Check the highlight box ![]({{assetsURL}}/img/guide/layers/check.png) to keep th ### ![]({{assetsURL}}/img/guide/footer/data_table.svg) Data Table [Top](#footerSection) +_**Note: Click on a layer to display its Data Table information in the right section.**_ + The **Data Table** tab has two sections. The layers are listed on the left and the layer data on the right. Click on a layer to show the layer data in the table on the right. **Data Table Controls** @@ -398,7 +402,9 @@ To access the buttons and/or input fields within a cell, make sure the cell is h ### ![]({{assetsURL}}/img/guide/footer/time_slider_30.svg) Time Slider [Top](#footerSection) -The Time Slider tab on the Footer Bar has two sections. Layers with a time dimension are listed in the left section. Click on a layer to display its Time Slider in the right section: +_**Note: Click on a layer to display its Time Slider information in the right section.**_ + +The Time Slider tab on the Footer Bar has two sections. Layers with a time dimension are listed in the left section. The Time Slider section displays a slider bar with one or two draggable handles. A point in time layer will show one handle. A time period layer will show two handles, to adjust the start and end time of the period. @@ -419,10 +425,10 @@ The field being filtered on is displayed in the lower left of the Time Slider se ### ![]({{assetsURL}}/img/guide/footer/chart_30.svg) Chart [Top](#footerSection) -The Chart tab on the Footer Bar has two sections. Layers with a chart are listed in the left section. Select a feature on the map to display its chart in the right section. - _**Note: A feature on the map must be selected to enable the layer in the list. Otherwise layers are disabled (greyed out).**_ +The Chart tab on the Footer Bar has two sections. Layers with a chart are listed in the left section. Select a feature on the map to display its chart in the right section. + The Feature dropdown (upper left of the chart section), can be used to select a feature. This is useful when features are close together on the map, making it difficult to click on the desired one. The visibility of data displayed on the chart can be toggled by clicking the checkbox ![]({{assetsURL}}/img/guide/layers/check.png) next to the data name shown above the chart (only for layers with multiple data items): diff --git a/packages/geoview-core/public/locales/fr/guide.md b/packages/geoview-core/public/locales/fr/guide.md index b62c0bb273d..ef3e047612d 100644 --- a/packages/geoview-core/public/locales/fr/guide.md +++ b/packages/geoview-core/public/locales/fr/guide.md @@ -203,6 +203,8 @@ L’onglet **Couches** comprend les sous-menus suivants : #### ![]({{assetsURL}}/img/guide/footer/view_25.svg) Vue +_**N.B. : Cliquez sur une couche pour afficher ses information dans la section de droite.**_ + Le sous-menu **Vue** de l’onglet **Couches** se divise en deux sections. La section de gauche présente les couches affichées sur la carte. Si vous cliquez sur une couche, ses paramètres (options accessibles pour la couche) s’afficheront dans la section de droite. **Icônes de couche** @@ -291,10 +293,10 @@ Pour retirer une couche, cliquez sur l’icône de suppression ![]({{assetsURL}} ### ![]({{assetsURL}}/img/guide/sidebar/details_30.svg) Détails [Haut de page](#footerSection) -L’onglet **Détails** se divise en deux sections. La section de gauche dresse la liste des couches accessibles, tandis que celle de droite affiche le détail des éléments pour chaque couche. - _**N.B. : Il faut sélectionner un élément sur la carte pour que la couche devienne cliquable dans la liste, sans quoi elle sera désactivée (grisée).**_ +L’onglet **Détails** se divise en deux sections. La section de gauche dresse la liste des couches accessibles, tandis que celle de droite affiche le détail des éléments pour chaque couche. + Cliquez sur une couche pour afficher ses éléments en détail. Le nombre d’éléments pour la couche sélectionnée est indiqué en haut à gauche de la section détaillée. @@ -310,6 +312,8 @@ Cochez la case ![]({{assetsURL}}/img/guide/layers/check.png) pour garder l’él ### ![]({{assetsURL}}/img/guide/footer/data_table.svg) Données [Haut de page](#footerSection) +_**N.B. : Cliquez sur une couche pour afficher ses données dans la section de droite.**_ + L’onglet **Données** se divise en deux sections. La liste des couches se trouve à gauche, et les données des couches, à droite. Cliquez sur une couche pour en voir les données dans le tableau de droite. **Commandes de l’onglet Données** @@ -392,7 +396,9 @@ Pour accéder aux boutons ou aux champs de saisie d’une cellule, assurez-vous ### ![]({{assetsURL}}/img/guide/footer/time_slider_30.svg) Curseur temporel [Haut de page](#footerSection) -L’onglet **Curseur temporel** dans le pied de page se divise en deux sections. La liste des couches ayant un facteur temporel se trouve dans la section de gauche. Cliquez sur une couche pour afficher son curseur temporel dans la section de droite : +_**N.B. : Cliquez sur une couche pour afficher son curseur temporel dans la section de droite.**_ + +L’onglet **Curseur temporel** dans le pied de page se divise en deux sections. La liste des couches ayant un facteur temporel se trouve dans la section de gauche. Une barre de curseur s’affiche avec un ou deux points déplaçables. Pour les couches à facteur temporel ponctuel, il n’y a qu’un point déplaçable. Pour les couches à plage temporelle, il y a deux points déplaçables permettant de régler le début et la fin de la plage. @@ -413,10 +419,10 @@ Le champ visé par le filtre s’affiche en bas à gauche de la section du curse ### ![]({{assetsURL}}/img/guide/footer/chart_30.svg) Graphique [Haut de page](#footerSection) -L’onglet **Graphique** dans le pied de page se divise en deux sections. La liste des couches comportant un graphique se trouve dans la section de gauche. Sélectionnez un élément sur la carte pour en voir le graphique dans la section de droite. - _**N.B. : Il faut sélectionner un élément sur la carte pour que la couche devienne cliquable dans la liste, sans quoi elle sera désactivée (grisée).**_ +L’onglet **Graphique** dans le pied de page se divise en deux sections. La liste des couches comportant un graphique se trouve dans la section de gauche. Sélectionnez un élément sur la carte pour en voir le graphique dans la section de droite. + Le menu déroulant **Élément** (en haut à gauche de la section du graphique) permet également de sélectionner un élément. Il s’agit d’une fonction pratique lorsque plusieurs éléments sont rapprochés sur la carte et qu’il est difficile de sélectionner celui voulu. Vous pouvez cocher ou décocher les cases ![]({{assetsURL}}/img/guide/layers/check.png) des données au-dessus du graphique pour déterminer le contenu de celui-ci (seulement pour les couches comportant plusieurs éléments de données). diff --git a/packages/geoview-core/public/templates/demos/demo-function-event.html b/packages/geoview-core/public/templates/demos/demo-function-event.html index 3a42a289674..2e2b02ce8ac 100644 --- a/packages/geoview-core/public/templates/demos/demo-function-event.html +++ b/packages/geoview-core/public/templates/demos/demo-function-event.html @@ -96,7 +96,7 @@

API Functions:

cgpv.api.maps.Map1.layer.setAllLayersVisibility(false)

  • - cgpv.api.maps.Map1.layer.setLayerName('Water Quantity') + cgpv.api.maps.Map1.layer.setLayerName('uniqueValueId/1', 'Water Quantity')

  • cgpv.api.maps.Map1.clickMarkerIconShow({lnglat: [-90, 60]}) @@ -456,7 +456,7 @@

    Events that will generate notifications:

    // add an event listener when a button is clicked renameLayerButton.addEventListener('click', async () => { - cgpv.api.maps.Map1.layer.setLayerName('Water Quantity') + cgpv.api.maps.Map1.layer.setLayerName(LYR_PATH_UNIQUE, 'Water Quantity') }); // Place Marker Button======================================================================================================== diff --git a/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts b/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts index 3cfabc5e2be..00cd055c094 100644 --- a/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts +++ b/packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts @@ -8,7 +8,7 @@ import { Extent } from 'ol/extent'; import Feature from 'ol/Feature'; import Geometry from 'ol/geom/Geometry'; -import { validateExtent, getExtentUnion } from '@/geo/utils/utilities'; +import { validateExtent } from '@/geo/utils/utilities'; import { Projection } from '@/geo/utils/projection'; import { logger } from '@/core/utils/logger'; import { DateMgt } from '@/core/utils/date-mgt'; @@ -25,7 +25,6 @@ import { import { esriGetFieldType, esriGetFieldDomain } from '../utils'; import { AbstractGVRaster } from './abstract-gv-raster'; import { TypeOutfieldsType } from '@/api/config/types/map-schema-types'; -import { TypeJsonObject } from '@/api/config/types/config-types'; import { getLegendStyles } from '@/geo/utils/renderer/geoview-renderer'; import { CONST_LAYER_TYPES } from '../../geoview-layers/abstract-geoview-layers'; import { TypeLegend } from '@/core/stores/store-interface-and-intial-values/layer-state'; @@ -839,54 +838,75 @@ export class GVEsriDynamic extends AbstractGVRaster { override async getExtentFromFeatures(objectIds: string[], outfield?: string): Promise { // Get url for service from layer entry config const layerEntryConfig = this.getLayerConfig(); - const serviceMetaData = layerEntryConfig.getServiceMetadata() as TypeJsonObject; - const wkid = serviceMetaData?.spatialReference.wkid ? serviceMetaData.spatialReference.wkid : undefined; let baseUrl = layerEntryConfig.source.dataAccessPath; const idString = objectIds.join('%2C'); if (baseUrl) { // Construct query if (!baseUrl.endsWith('/')) baseUrl += '/'; - // GV: outFields here is not wanted, it is included because some sevices require it in the query. It would be possible to use - // GV cont: OBJECTID, but it is not universal through the services, so we pass a value through. + + // Use the returnExtentOnly=true to get only the extent of ids + // TODO: We should return a real extent geometry Projection.transformAndDensifyExtent const outfieldQuery = outfield ? `&outFields=${outfield}` : ''; - let precision = ''; - let allowableOffset = ''; - if ((serviceMetaData?.layers as Array).every((layer) => layer.geometryType !== 'esriGeometryPoint')) { - precision = '&geometryPrecision=1'; - allowableOffset = '&maxAllowableOffset=7937.5158750317505'; - } - const queryUrl = `${baseUrl}${layerEntryConfig.layerId}/query?&f=json&where=&objectIds=${idString}${outfieldQuery}${precision}&returnGeometry=true${allowableOffset}`; + const queryUrl = `${baseUrl}${layerEntryConfig.layerId}/query?&f=json&objectIds=${idString}${outfieldQuery}&returnExtentOnly=true`; try { const response = await fetch(queryUrl); const responseJson = await response.json(); + const { extent } = responseJson; - // Convert response json to OL features - const responseFeatures = new EsriJSON().readFeatures( - { features: responseJson.features }, - { - dataProjection: wkid ? `EPSG:${wkid}` : `EPSG:${responseJson.spatialReference.wkid}`, - featureProjection: this.getMapViewer().getProjection().getCode(), - } + const projExtent = Projection.transformExtentFromProj( + [extent.xmin, extent.ymin, extent.xmax, extent.ymax], + `EPSG:${extent.spatialReference.wkid}`, + this.getMapViewer().getProjection().getCode() ); - // Determine max extent from features - let calculatedExtent: Extent | undefined; - responseFeatures.forEach((feature) => { - const extent = feature.getGeometry()?.getExtent(); - - if (extent) { - // If extent has not been defined, set it to extent - if (!calculatedExtent) calculatedExtent = extent; - else getExtentUnion(calculatedExtent, extent); - } - }); - - return calculatedExtent; + return projExtent; } catch (error) { logger.logError(`Error fetching geometry from ${queryUrl}`, error); } + + // TODO: Cleanup - Keep fo reference + // // GV: outFields here is not wanted, it is included because some sevices require it in the query. It would be possible to use + // // GV cont: OBJECTID, but it is not universal through the services, so we pass a value through. + // const outfieldQuery = outfield ? `&outFields=${outfield}` : ''; + // let precision = ''; + // let allowableOffset = ''; + // if ((serviceMetaData?.layers as Array).every((layer) => layer.geometryType !== 'esriGeometryPoint')) { + // precision = '&geometryPrecision=1'; + // allowableOffset = '&maxAllowableOffset=7937.5158750317505'; + // } + // const queryUrl = `${baseUrl}${layerEntryConfig.layerId}/query?&f=json&where=&objectIds=${idString}${outfieldQuery}${precision}&returnGeometry=true${allowableOffset}`; + + // try { + // const response = await fetch(queryUrl); + // const responseJson = await response.json(); + + // // Convert response json to OL features + // const responseFeatures = new EsriJSON().readFeatures( + // { features: responseJson.features }, + // { + // dataProjection: wkid ? `EPSG:${wkid}` : `EPSG:${responseJson.spatialReference.wkid}`, + // featureProjection: this.getMapViewer().getProjection().getCode(), + // } + // ); + + // // Determine max extent from features + // let calculatedExtent: Extent | undefined; + // responseFeatures.forEach((feature) => { + // const extent = feature.getGeometry()?.getExtent(); + + // if (extent) { + // // If extent has not been defined, set it to extent + // if (!calculatedExtent) calculatedExtent = extent; + // else getExtentUnion(calculatedExtent, extent); + // } + // }); + + // return calculatedExtent; + // } catch (error) { + // logger.logError(`Error fetching geometry from ${queryUrl}`, error); + // } } return undefined; }