Les nouveautés de la version 4.30 de l'API JavaScript d'ArcGIS

"La plus grosse sortie de version depuis un certain temps" selon Esri, la version 4.30 de l'API JavaScript d'ArcGIS est disponible depuis le 27 juin 2024. Cette version contient des capacités attendues depuis longtemps, ainsi que diverses améliorations visant à améliorer l'expérience utilisateur mais aussi celle du développeur. Dans cet article, je vous propose de jeter un oeil ensemble aux nouveautés majeures apportées par cette nouvelle version du SDK web d'ArGIS.

Utilisez les composants web pour développer vos applications

Les composants du SDK, introduits en octobre dernier dans la version 4.28, sont l'approche recommandée par Esri pour construire l'expérience utilisateur de votre application cartographique.

Dans la version 4.30, les composants map et coding sortent de leur phase de bêta !

Ces composants d'interface utilisateur pré-construits, se basant sur les spécifications standards des composants web, vous permettent de développer vos applications avec  un minimum de code, en encapsulant des fonctionnalités dans des balises HTML simples à intégrer. Par exemple, l'élément <arcgis-map></arcgis-map> vous permet d'ajouter une carte à votre site web.

Notez que les composants charts, introduits en février dans la 4.29, restent pour l'instant  en bêta.

Enregistrements liés et colonnes personnalisées dans les tables attributaires

Cette mise à jour de l'API est très importante pour les tables attributaires, qui se voient enrichies du support des enregistrement liés, de la capacité à utiliser des colonnes personnalisées, d'une meilleure interaction à la sélection, de performances plus rapide et d'un responsive design amélioré. Voyons cela plus en détails :

Enregistrements liés

Il est désormais possible de voir et même d'éditer des enregistrements liés au sein des tables attributaires, en paramétrant la propriété relatedRecordsEnabled à true.

Colonnes personnalisées

Il est désormais possible de personnaliser pleinement le contenu des colonnes grâce aux colonnes personnalisées (ou colonnes virtuelles). Ces dernières ne se basent pas sur un champ spécifique de la couche, ce qui vous permet d'en définir un contenu et un formatage personnalisés en y incluant ce que vous souhaitez. 

Vous pouvez par exemple intégrer des composants de Calcite, utiliser Arcade pour calculer une valeur, et / ou formater le contenu en vous basant sur votre cas d'usage spécifique. Vous puovez également configurer le titre et la description dans l'entête de la table.

Je vous conseille d'aller observer cela de plus près dans cet exemple de code.

 

Contenu dynamique dans les cellules

En plus des colonnes personnalisées, vous pouvez encore aller plus loin dans le contenu de votre table attributaire, dont les cellules supportent maintenant le contenu dynamique. Le contenu de la colonne peut être mis à jour en utilisant la nouvelle propriété formatFunction sur la classe Column ou sur la classe FieldColumn.

Sélection et mise en surbrillance

La sélection et la mise en surbrillance ont été améliorées dans cette version, avec une meilleure coordination entre la table et la carte en utilisant les propriétés rowHighlightIds, objectIds, filterBySelectionEnabled et les événements cell-click, cell-keydown, cell-pointerover.

Meilleures performances

Les développeurs d'Esri se sont également appliqués à améliorer le temps de chargement des tables, en se basant désormais sur un "lazy loading". Cela signifie que si vous travaillez avec des couches contenant de nombreux attributs, les colonnes sont maintenant chargées au fur et à mesure que l'utilisateur scrolle horizontalement dans la table.

 

Responsive Design

La table attributaire a été mise à jour pour utiliser les composants de Calcite, permettant une  accessibilité renforcée et un responsive design amélioré. Les nouvelles propriétés autoWidth, flexGrow, et width donnent un meilleur contrôle sur la taille des colonnes. 

Notez aussi que des icônes peuvent désormais être ajoutés aux entêtes des colonnes.

Nouveautés de la 3D

Analyse interactive du champ de vision

est un nouvel outil d'analyse permettant d'évaluer le champ de vision depuis un point placé soit de manière interactive dans la scène par l'utilisateur, soit directement dans le code. Il est possible d'ajuster la largeur du champ de vision ainsi que l'angle de vue.

Orientation des étiquettes des couches de tuiles vectorielles dans les scènes 3D

Les étiquettes et les symboles d'une couche de tuiles vectorielles tournent en fonction de l'orientation de la caméra dans la vue de la scène, ce qui améliore la reconnaissance des symboles et la lisibilité du texte.

Support des données temporelles en 3D

Les couches de scènes d'objet 3D, de points et de voxels peuvent maintenant être utilisées dans le widget TimeSlider et filtrées selon la propriété view.timeExtent.

Import et export des modèles 3D

L'import de modèles 3D sort de la phase bêta : Le téléchargement et le partage de contenu 3D avec l'édition de couches de scène ont été introduits pour la première fois en version bêta dans la version 4.27. Depuis, Esri a amélioré les performances, la prise en charge des projections locales et globales et finalisé les API de géométrie Mesh. La possibilité de télécharger des modèles 3D à partir de différents formats et de les placer à l'aide du widget Edit est maintenant sortie de la phase bêta.
Exportation de meshs 3D vers glTF : Vous pouvez interroger les géométries de maillage d'une couche de scène pour exporter des modèles 3D au format glTF avec la nouvelle fonction toBinaryGLTF, puis utiliser le maillage exporté dans un logiciel de modélisation 3D professionnel. Cela permet des workflows collaboratifs qui impliquent une modélisation avancée, en particulier dans les secteurs de la planification urbaine et de l'immobilier.

Imagerie orientée en 3D 

Les couches d'imagerie orientées peuvent maintenant être publiée avec une valeur z, vous permettant de les visualiser et d'interagir avec dans une scène 3D. Lorsque le point de vue de l'image est ajusté dans le visualisateur d'images orientées, la géométrie 3D de la couverture de l'image est visualisée sur la carte.

Amélioration des performances de l'API

Liste des couches plus rapide et plus fluide : Dans la version 4.30 de l'API, le rendu de la liste de couches est jusqu'à 2,5 fois plus rapide que dans la version 4.29. Le nombre de frame par seconde (fps) est aussi plus élevé dans les applications utilisant une liste de couche contenant de nombreuses couches. L'application test d'Esri contient 165 couches, et le nombre de fps lors du déplacement est passé d'environ 24fps en 4.29 à environ 45fps en 4.30 lors du déplacement et du zoom dans la carte.

Amélioration des capacité des couches d'entités : Esri a optimisé l'animation lorsque l'on bouge entre différentes localisations dans la MapView. Désormais, seules les entités du point de vue de destination de l'animation sont récupérées, ce qui réduit considérablement le nombre de requêtes. Par exemple, lors de la navigation entre les signets de la Californie et de l'Oregon, la version 4.30 fait plus de 50 % de requêtes en moins par rapport à la version 4.29. Cette amélioration renforce l'efficacité et améliore l'expérience globale de l'utilisateur.

Couches de catalogue

Le nouveau type de couche CatalogLayer (couche de catalogue) vous permet de visualiser, de rechercher et de filtrer une collection de couches en 2D et en 3D. À première vue, il ressemble à un groupe de couche, mais il est soutenu par un service d'entités où chaque entité polygonale sur la carte représente l'empreinte d'une couche de catalogue. Il est aussi possible de prévisualiser le contenu de la couche directement à partir du catalogue. Comme le contenu du catalogue est soutenu par un service d'entités, le catalogue peut être mis à jour régulièrement avec de nouvelles couches, ce qui permet de maintenir une collection de couches dynamique et à jour. En utilisant les métadonnées de l'empreinte, vous pouvez appliquer un filtre basé sur tout ce qui peut être appliqué à une entité - y compris les attributs, la géométrie et/ou le temps.

Les couches du catalogue sont particulièrement utiles lorsque le contenu d'une carte ou d'une scène contient de grandes collections de couches, lorsque votre organisation produit rapidement de nouvelles données ou pour partager des données organisées par thème.

Le nouveau widget CatalogLayerList permet d'afficher et d'interagir avec les couches du catalogue et s'intègre à la liste des couches.

Support des vidéos géoréférencées (bêta)

Le nouveau type de couche VideoLayer (couche de vidéo) affiche des flux vidéo préenregistrés ou diffusés en direct à partir d'un Video Server (disponible depuis la version 11.2 d'ArcGIS Enterprise). Vous pouvez ainsi afficher une vidéo géoréférencée sur une carte et contrôler la lecture à l'aide du nouveau  widget VideoPlayer. Le lecteur vidéo propose des opérations de contrôle, l'affichage de l'heure et de la durée, des couleurs graphiques personnalisables, etc. Les deux sont pour l'instant en version bêta.

Nouveau style de symbologie

Le smart-mapping s'enrichit d'un nouveau style "reference-size", qui affiche des points dont la taille est proportionnelle à la valeur des données par rapport à une taille de référence. Il permet de visualiser efficacement la densité, en particulier pour les ensembles de données quadrillées dont les géométries ne se chevauchent pas. Vous pouvez utiliser la taille de référence en combinaison avec la couleur pour montrer les types ou la densité de plusieurs variables.

Vous pouvez créer une visualisation de type reference-size dans Map Viewer, l'enregistrer sur une webmap, puis la charger dans votre application ; ou la générer directement dans le code à l'aide du size renderer.

Nouveaux symboles vecteurs 2D 

Esri a ajouté plus de 3000 symboles de vecteurs 2D à l'intérieur du Esri Web Style Symbols (2D). Cela inclut des symboles qui étaient déjà disponibles dans ArcGIS Online et dans ArcGIS Pro. Vous pouvez utiliser ces symboles en référençant le nom du style et le nom du symbole disponible en cliquant sur n'importe lequel des symboles disponibles sur la page Esri Web Style Symbols.

Alignement des étiquettes et ouverture des fenêtres contextuelles

Nouvelles options de placement des étiquettes le long des polylignes : Les étiquettes le long des polylignes peuvent être alignées au-dessus ou au-dessous de la ligne. D'autres options devraient être ajoutées dans les prochaines versions.

Ouverture de la popup lors du clic sur l'étiquette : Il est maintenant possible d'ouvrir la fenêtre contextuelle (popup) en cliquant sur l'étiquette d'une entité. La popup s'ouvre alors à l'endroit sur lequel l'utilisateur a cliqué.

Visibilité des couches selon l'étendue temporelle

La nouvelle propriété visibilityTimeExtent permet de contrôler la visibilité des calques en fonction d'un intervalle de temps configuré pour tous les types de calques. Cette propriété est particulièrement utile lorsque vous travaillez avec des couches qui ne contiennent pas d'informations temporelles, comme les couches en mosaïque, les maillages intégrés ou les couches graphiques.

Par exemple, en établissant une étendue temporelle fixe pour les images de périodes particulières, les utilisateurs bénéficient d'un contexte temporel, ce qui permet une analyse ciblée centrée sur des périodes ou des événements spécifiques. Dans l'exemple ci-dessous, plusieurs couches graphiques avec une visibilité temporelle permettent à l'utilisateur de voir des graphiques affichant des informations textuelles sur le périmètre de l'incendie de forêt qui change en fonction de la position du curseur temporel.

Animation de la navigation dans la carte

Des améliorations significatives ont été apporté au comportement de l'animation de la fonction MapView.goTo().   Un nouveau style d'animation crée un mouvement en forme d'arc qui fournit plus de contexte géographique entre deux lieux. En outre, au lieu d'utiliser une durée fixe pour l'animation, la nouvelle expérience calcule dynamiquement la durée idéale de l'animation de navigation en fonction de la distance entre l'origine et la destination. La durée et les autres paramètres de l'animation restent bien sûr modifiables. 

Cette nouvelle expérience de navigation s'applique également aux widgets Bookmarks et Search, ainsi que dans tout workflow impliquant une transition entre différents lieux.

Notez les animations peuvent ne pas convenir à tout le monde, car certaines d'entre elles peuvent gêner les personnes souffrant de troubles vestibulaires. Pour désactiver les animations de navigation 2D MapView dans le SDK, les utilisateurs peuvent définir l'option prefers-reduced-motion dans les paramètres de leur appareil ou de leur navigateur. Consultez le guide sur l'accessibilité pour en savoir plus sur la manière de créer des applications accessibles et de soutenir des publics plus diversifiés.

Meilleure expérience mobile pour le widget Expand

Le widget Expand a été mis à jour pour se baser sur les composants de Calcite, permettant une meilleure expérience pour les appareils mobiles. Par défaut, le widget bascule de manière dynamique entre la mode "floating" et le mode "drawer" selon la taille du navigateur. La nouvelle propriété placement vous permet de contrôler l'emplacement du popover lorsque le widget est développé.

Mesure et accrochage en 2D

Les mesures de surface et de distance en 2D prennent désormais en charge l'accrochage, qui est activé par défaut. Il peut être temporairement désactivé en maintenant la touche CTRL enfoncée. Cette fonction est déjà prise en charge dans les mesures 3D.

Amélioration de l'édition

Saisie des coordonnées et amélioration des info-bulles : Les entités peuvent maintenant être modifiées avec précision en tapant ou en copiant-collant des coordonnées dans une infobulle. Ce nouveau type de saisie est disponible lors de la création et de la mise à jour de géométries ponctuelles ou des sommets de lignes et de polygones. La saisie de coordonnées permet également un géoréférencement précis des bâtiments lors du téléchargement ou de l'édition de géométries de maillage.

Support des sous-types : les widgets Editor et FeatureForm supportent désormais l'édition des couches d'entités contenant des sous-types.

L'image ci-dessus illustre la nouvelle invite qui apparaît lorsque la valeur d'un champ de sous-type est modifiée. A chaque fois que le champ de est modifié, les domaines de champ sont remplacés par les domaines de champ définis dans le nouveau sous-type.

Formatage personnalisé du texte dans le widget FeatureForm : FeatureForm support désormais le rendu de TextElement, ce qui permet d'ajouter du contenu personnalisé et en lecture seule au formulaire.

Pour en savoir +

Dans cet article, nous avons évoqué les nouveautés principales que cette nouvelle version apporte au SDK JavaScript d'ArcGIS. Pour retrouver toutes les nouvelles fonctionnalités et amélioration, mais aussi les corrections de bugs et les breaking changes, je vous conseille d'aller lire les notes de version dans la documentation de l'API.

Notez aussi que le 8 juillet à 18h, l'équipe de développeurs de l'API sera en live sur Youtube pour présenter cette mise à jour à travers différentes démonstrations.

Enfin, si vous débutez avec le SDK JavaScript d'ArcGIS, je vous invite à consulter cette série de tutoriels pour le prendre en main facilement. On se retrouve bientôt dans un prochain article !