Afin de permettre aux utilisateurs de naviguer plus aisément entre les
différents points d'intérêts de notre scène web interactive, nous allons y
ajouter des géosignets (bookmarks) dans ce sixième épisode de la
série consacrée à la prise en main de l'API JavaScript d'ArcGIS. Pour cela, nous ferons appel à un
widget
de l'API, qui nous permet de créer des interactions poussées avec la vue de
notre carte en seulement quelques lignes de code.
Voici le résultat que nous allons obtenir à l'issue de cette étape :
Comme vous le voyez, les
géosignets
permettent de faire naviguer la caméra vers des lieux prédéfinis de notre
scène. Nous allons en créer un pour Montmartre, un pour le bois de Boulogne et
un pour le Trocadéro et la Tour Eiffel.
Vous pouvez suivre pas à pas le tutoriel ci-dessous pour obtenir le même résultat, ou aller sur ce CodePen pour jouer interactivement avec les paramètres du code
Vous pouvez suivre pas à pas le tutoriel ci-dessous pour obtenir le même résultat, ou aller sur ce CodePen pour jouer interactivement avec les paramètres du code
Les widgets de l'API JavaScript d'ArcGIS
Les géosignets que nous allons mettre en place sont issus de la classe
Widget
de l'API. Cette classe contient de nombreux outils prêts à l'emploi que vous
pouvez utiliser afin d'enrichir votre application. L'API JavaScript d'ArcGIS
étant une API cartographique, vous trouverez de nombreux widgets relatifs aux
cartes (légende,
profil d'élévation,
mesure,
localisation,
fonds de carte, etc.), mais aussi liés aux données (liste des tables,
histogramme,
éditeur, etc.). Vous pouvez en retrouver la liste complète
ici.
Ces nombreux widgets sont très utiles, car ils vous économisent un grand temps
de développement. Imaginez : vous souhaitez ajouter une barre d'échelle à
votre carte. Pour cela, vous devez créer un style pour votre échelle,
configurer sa taille et s'assurer qu'elle soit correcte par rapport à la
taille de la carte et de l'écran, adapter son comportement et son évolution en
fonction des zooms et des dézooms de l'utilisateur, ... Avec l'API, vous
pouvez faire appel au widget
ScaleBar
préconfiguré et régler ce problème en deux lignes :
let scaleBar = new ScaleBar({view: view});
view.ui.add(scaleBar, {position: "bottom-left"});
De la même manière ici, nous allons utiliser le widget Bookmarks
(géosignet) de l'API. Nous n'aurons qu'à indiquer les différents
paramètres de caméra et le nom de chacun des géosignets, et le reste sera
prévu par le widget : style d'affichage du widget, mode de déplacement de
la caméra entre les différents points de vue, etc.
Créer des géosignets
Afin de rajouter des géosignets à notre scène, nous allons utiliser le widget
Bookmarks
(Géosignets), qui contiendra lui-même une collection de différents
Bookmark
contenant chacun les paramétrages de caméra pour naviguer vers une étendue
particulière de la scène
Complétion de la directive require
Comme expliqué dans l'épisode 2 de la série, nous allons compléter la directive require de notre code afin de pouvoir
faire appel aux modules
Bookmarks
et
Bookmark
de l'API. Nous les rajoutons donc en compléments des autres modules que nous
avons utilisés lors des étapes précédentes :
require([
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/GeoJSONLayer",
"esri/popup/content/TextContent",
"esri/popup/content/MediaContent",
"esri/popup/content/ImageMediaInfo",
"esri/popup/content/support/ImageMediaInfoValue",
"esri/widgets/Bookmarks",
"esri/webmap/Bookmark",
], (
Map, Basemap, SceneView, GeoJSONLayer, TextContent, MediaContent, ImageMediaInfo, ImageMediaInfoValue, Bookmarks, Bookmark) => {{
Création d'une instance de widget Bookmarks
Nous allons paramétrer le widget
Bookmarks
avec deux propriétés. La première,
view, indique sur quelle instance de vue l'action du widget s'effectuera,
c'est-à-dire pour le widget Bookmarks dans quelle vue les paramètres de caméra
seront actualisés. Notre application ne contenant qu'une seule vue
nommée view, sur laquelle nous paramétrons la propriété.
La seconde propriété,
bookmarks, attend une liste de
Bookmark
donnant les coordonnées de la caméra que nous paramétrerons juste après.
const bookmarks = new Bookmarks({
view: view,
bookmarks: [
// ajout de chacun des géosignets à l'étape suivante
],
});
Paramétrage de chaque Bookmark
Nous allons compléter le paramètre
bookmarks
du widget en créant trois nouveaux Bookmark.Voici comment créer un Bookmark, avec par exemple celui renvoyant sur la vue
de Montparnasse :
new Bookmark({
name: "Montmartre",
viewpoint: {
camera: {
position: {
longitude: 2.340861136194503,
latitude: 48.88276594605576,
z: 178.8139155479148,
},
heading: 29.620133897254565,
tilt: 65.59724234196116,
},
},
}),
Chaque Bookmark contient un nom (name) qui renseigne sur le lieu vers lequel renvoie le géosignet et qui sera
affiché dans l'application. Il doit donc être explicite pour que l'utilisateur
sache vers quel endroit il sera renvoyé en cliquant sur le widget.
Nous nous intéressons ensuite à la propriété
viewpoint, qui nous permet d'indiquer comment la caméra sera positionnée pour le
géosignet. C'est une propriété centrale, car c'est elle qui donne l'étendue
géographique de chacun des géosignets. Comme dans
l'épisode 1 où nous avions paramétré le point de vue initial de la caméra
dans la scène, nous donnons ici la longitude, la latitude et l'altitude de la caméra ainsi
que son orientation par rapport au Nord et son inclinaison.
Afin de pouvoir connaître les paramètres de caméra que vous pouvez utiliser
pour paramétrer vos géosignets, vous pouvez utiliser cette application qui vous permet de naviguer dans une scène puis de copier/coller les paramètres de caméra une fois que vous avez trouvé le point de vue idéal (n'hésitez pas à aller consulter l'application en mode plein écran pour mieux pouvoir l'utiliser).
Je ne l'ai pas fait ici pour ne pas surcharger l'interface de l'application,
mais sachez que vous pouvez également paramétrer une miniature (thumbnail) pour votre
Bookmark
en donnant un lien vers une image afin que l'utilisateur puisse prévisualiser
l'étendue du géosignet sans même cliquer dessus
Voici le paramétrage final du widget
Bookmarks
et des trois
Bookmark
qu'il contient :
const bookmarks = new Bookmarks({
view: view,
bookmarks: [
new Bookmark({
name: "Montmartre",
viewpoint: {
camera: {
position: {
longitude: 2.340861136194503,
latitude: 48.88276594605576,
z: 178.8139155479148,
},
heading: 29.620133897254565,
tilt: 65.59724234196116,
},
},
}),
new Bookmark({
name: "Bois de Boulogne",
viewpoint: {
camera: {
position: {
longitude: 2.2321180102165576,
latitude: 48.86061846868905,
z: 263.4042479386553,
},
heading: 57.84309619643786,
tilt: 72.15443981366577,
},
},
}),
new Bookmark({
name: "Trocadéro et Tour Eiffel",
viewpoint: {
camera: {
position: {
longitude: 2.292790675917738,
latitude: 48.84796326886384,
z: 450.4147386122495,
},
heading: 355.6069497207025,
tilt: 73.39124532085117,
},
},
}),
],
});
Ajouter les géosignets à la vue
Nous avons défini plus tôt sur quelle vue allait interagir le widget, mais
nous devons également définir dans quelle vue le widget va simplement
s'afficher. Avec l'API JavaScript d'ArcGIS, c'est à l'intérieur de l'interface
utilisateur l'(ui) d'une vue
que vous pourrez ajouter les différents
widgets
que vous créez. Nous accédons donc à l'ui de notre vue, et nous y utilisons la méthode
.add()
pour afficher le widget Bookmarks
que nous venons de paramétrer et choisissons une position en haut à droite de
notre application.
view.ui.add(bookmarks, {
position: "top-right",
});
C'est tout pour cette semaine ! N'hésitez pas à aller consulter le code
complet à l'issue de cette étape sur
Github
ou sur
CodePen. Lors de la prochaine étape, nous apprendrons à utiliser un composant du
Calcite Design System d'Esri afin d'afficher ou de cacher la couche des arbres
de la basemap permettant de voir ou non les autres arbres de la capitale. En attendant, n'hésitez pas à retrouver les autres épisodes de cette série si vous les avez manqués.
Aucun commentaire:
Enregistrer un commentaire