Se familiariser avec JavaScript API 4.0

Noah Sager

<\/HEAD>Maintenant que l'ArcGIS API for JavaScript 4.0 a été publiée<\/A><\/STRONG> depuis quelques semaines, c'est une excellente occasion de parcourir certaines des nouvelles syntaxes et fonctionnalités. Ce blog va passer en revue une application 3D exemple en se concentrant sur le widget Search. Vous pouvez suivre avec le code exemple depuis le dépôt GitHub Esri Developer Support<\/A><\/STRONG>, et exécuter l'exemple hébergé ici : Voir en direct<\/A><\/STRONG>.

Fonctionnellement, l'application affiche une carte 3D avec quatre widgets : Search, Zoom, Compass, et Attribution. Par défaut, la View inclut les trois derniers widgets, comme décrit dans la documentation<\/A><\/STRONG>. Si vous n'êtes pas familier avec les changements 4.x, toutes les applications cartographiques contiennent une map et une view. La map contient les données, et la view contient les informations de visualisation pour ces données. En d'autres termes, la map est le sujet, et la view est la caméra ; complète avec filtres, modes et réglages. Toutes les applications 2D auront des MapViews, et les applications 3D auront des SceneViews (note : le terme « scene » indique trois dimensions dans ArcGIS). Il en va de même pour les cartes d'ArcGIS Online et Portal for ArcGIS : un WebMap est en 2D, et un WebScene est en 3D.

<\/A>

Carte 2D + scène 3D<\/P><\/DIV>

Vous pouvez saisir un emplacement dans le widget Search et soit sélectionner un résultat dans les suggestions déroulantes, soit appuyer sur Entrée au clavier pour aller au premier lieu de la liste. La view effectuera un zoom sur cet emplacement et placera un symbole marqueur image sur la carte. Si vous ouvrez les Outils de développement dans le navigateur web, vous verrez des messages utiles dans la console indiquant la progression du widget Search.

Dans le code, il y a beaucoup de commentaires utiles décrivant la fonctionnalité, avec des liens vers des références pour trouver plus d'informations. Les constructeurs Map et SceneView peuvent être nouveaux, mais ils sont très simples. Ce sur quoi je veux me concentrer ici sont deux choses : le

SearchViewModel<\/A><\/STRONG> (à partir de la ligne 88), et le view.ui<\/A><\/STRONG> (à partir de la ligne 117).

Une des fonctionnalités géniales de la version 4.0 est la séparation du style et de la logique métier. Cela signifie que les widgets ont une view et un ViewModel. La view est le widget lui-même et gère l'affichage du widget, tandis que le ViewModel gère les propriétés et configurations. Je devrais mentionner que nous n'avons pas à utiliser le ViewModel si nous ne voulons pas puisque les propriétés du ViewModel sont aussi connectées à la view du widget. Cela a été fait pour des raisons de simplicité. Par exemple, regardons le widget Search dans le code :

<\/A>

Widget Search et SearchViewModel<\/P><\/DIV>

Le constructeur réel du widget a été utilisé pour nommer le widget et définir la visibilité à true (par défaut c'est true de toute façon). Le SearchViewModel gère toutes les configurations qui ont été définies pour personnaliser l'expérience utilisateur et l'interface comme je le voulais (voir l'exemple pour les commentaires). Ce qui est intéressant avec ce système ViewModel c'est qu'étant séparé du constructeur du widget, il est maintenant beaucoup plus facile de partager la logique métier entre widgets et bases de code. Voici plus d'informations sur le

SearchViewModel<\/A><\/STRONG>.

Le second aspect intéressant de la version 4.0 dont je vais parler ici est comment nous ajoutons le widget Search à l'application. Regardons l'extrait de code de la version 4.0 et celui de la version 3.x. Actuellement, nous pouvons ajouter le widget directement à l'interface utilisateur de la view sans créer un élément div séparé. C'est un flux de travail efficace (et oserais-je dire élégant).

<\/>

Ajouter Widget Search version 4.0<\/><\/><\/><\/>À la version 3.x, nous devons créer un élément div, référencer ce div lors de la création du widget, puis le référencer à nouveau dans la balise body HTML.

Ajouter Widget Search version 3.x

Pour plus d'informations sur l'ajout de widgets à la view, vous pouvez consulter cette documentation.

En résumé, l'ArcGIS API for JavaScript est un produit puissant qui exploite la puissance du SIG directement dans votre navigateur web. Si vous avez travaillé avec des versions antérieures de l'API, lire le document d'aide Transition vers la version 4.x peut vous aider à démarrer. Et si vous êtes tout nouveau, vous pouvez commencer par le Guide Découverte version 4.x. Il y a beaucoup plus à venir alors que nous continuons à ajouter des fonctionnalités et des améliorations impressionnantes à JavaScript API 4.x. Bon codage !Noah S. - Responsable Prêt SDK



<\\BODY><\\HTML>