Skip to content

Commit

Permalink
fix doc and zoom extent
Browse files Browse the repository at this point in the history
  • Loading branch information
@jolevesq
jolevesq committed Jan 6, 2025
1 parent dc8d134 commit cee8231
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 45 deletions.
16 changes: 11 additions & 5 deletions packages/geoview-core/public/locales/en/guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down Expand Up @@ -297,10 +299,10 @@ To remove a layer, click on the delete icon ![]({{assetsURL}}/img/guide/layers/r
<a id="detailsSection"></a>
### ![]({{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.
Expand All @@ -316,6 +318,8 @@ Check the highlight box ![]({{assetsURL}}/img/guide/layers/check.png) to keep th
<a id="dataTableSection"></a>
### ![]({{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**
Expand Down Expand Up @@ -398,7 +402,9 @@ To access the buttons and/or input fields within a cell, make sure the cell is h
<a id="timeSliderSection"></a>
### ![]({{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.

Expand All @@ -419,10 +425,10 @@ The field being filtered on is displayed in the lower left of the Time Slider se
<a id="chartSection"></a>
### ![]({{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):
Expand Down
16 changes: 11 additions & 5 deletions packages/geoview-core/public/locales/fr/guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,8 @@ L’onglet **Couches** comprend les sous-menus suivants&nbsp;:

#### ![]({{assetsURL}}/img/guide/footer/view_25.svg) Vue

_**N.B.&nbsp;: 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**
Expand Down Expand Up @@ -291,10 +293,10 @@ Pour retirer une couche, cliquez sur l’icône de suppression ![]({{assetsURL}}
<a id="detailsSection"></a>
### ![]({{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.&nbsp;: 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.
Expand All @@ -310,6 +312,8 @@ Cochez la case ![]({{assetsURL}}/img/guide/layers/check.png) pour garder l’él
<a id="dataTableSection"></a>
### ![]({{assetsURL}}/img/guide/footer/data_table.svg) Données [Haut de page](#footerSection)

_**N.B.&nbsp;: 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**
Expand Down Expand Up @@ -392,7 +396,9 @@ Pour accéder aux boutons ou aux champs de saisie d’une cellule, assurez-vous
<a id="timeSliderSection"></a>
### ![]({{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&nbsp;:
_**N.B.&nbsp;: 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.

Expand All @@ -413,10 +419,10 @@ Le champ visé par le filtre s’affiche en bas à gauche de la section du curse
<a id="chartSection"></a>
### ![]({{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.&nbsp;: 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).
Expand Down
4 changes: 2 additions & 2 deletions packages/geoview-core/public/templates/demos/demo-function-event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ <h3>API Functions:</h3>
cgpv.api.maps.Map1.layer.setAllLayersVisibility(false)
</li>
<li><button id="Rename-layer">Rename Water Quantity layer</button><br />
cgpv.api.maps.Map1.layer.setLayerName('Water Quantity')
cgpv.api.maps.Map1.layer.setLayerName('uniqueValueId/1', 'Water Quantity')
</li>
<li><button id="Place-marker">Place a marker on map</button><br />
cgpv.api.maps.Map1.clickMarkerIconShow({lnglat: [-90, 60]})
Expand Down Expand Up @@ -456,7 +456,7 @@ <h3>Events that will generate notifications:</h3>

// 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========================================================================================================
Expand Down
86 changes: 53 additions & 33 deletions packages/geoview-core/src/geo/layer/gv-layers/raster/gv-esri-dynamic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -839,54 +838,75 @@ export class GVEsriDynamic extends AbstractGVRaster {
override async getExtentFromFeatures(objectIds: string[], outfield?: string): Promise<Extent | undefined> {
// 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<TypeJsonObject>).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<TypeJsonObject>).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;
}
Expand Down

0 comments on commit cee8231

Please sign in to comment.