Dans cet article, nous allons
appliquer plusieurs concepts que nous avons vus précédemment pour un besoin
spécifique. Nous allons importer depuis ArcGIS Online une FeatureLayer contenant les polygones des régions de France. On
souhaite que notre application permette de choisir la basemap via un widget, et
que, en fonction de la basemap choisie, la couche de polygone devienne
transparente si celle-ci est une image satellite, sinon qu’elle reste opaque.
Widget BasemapGallery
Le widget BasemapGallery
affiche une collection d'images représentant les fonds de carte d'ArcGIS.com,
ou un ensemble de services de carte ou d'image définis par l'utilisateur.
Lorsqu'un nouveau fond de carte est sélectionné dans BasemapGallery, il remplace le fond de carte actif. Par défaut, le
widget BasemapGallery ressemble à
l'image suivante :
Pour instancier le widget, il suffit de lui donner une vue à laquelle il doit être ajouté.
var basemapGallery = new BasemapGallery({
view: view,
});
Widget Expand
Le widget Expand
agit comme un bouton cliquable pour ouvrir un autre widget. Il est utile lorsqu’on
a ponctuellement besoin d’un widget mais que l’on ne souhaite pas que celui-ci
nous cache une grande partie de l’UI. Il suffit alors de cliquer sur l'icône du
widget pour afficher le contenu à l'intérieur du widget Expand (dans ce cas, le widget BasemapGallery).
Vous pouvez ensuite simplement réduire le contenu dans le widget en cliquant
sur l'icône de réduction.
Lors de la création d'une
instance de widget Expand, vous
devez également définir la vue référencée par le widget, et le widget qu'il contiendra, ici la gallerie de basemaps.
var widgetExpand = new Expand({
view: view,
content: basemapGallery
});
On ajoute le widget à l’UI en
haut à droite comme on l’a vu dans le précédent article.
view.ui.add(widgetExpand, "top-right");
Propriété watch et événement pour fermer le widget
La méthode watch permet de surveiller les changements
de propriété d’une instance et d’agir en conséquence. Surveiller les
changements de propriété est essentiel pour suivre les modifications sur les
objets. Il suffit d’appeler la méthode watch
() avec le nom de la propriété (de l’objet sur lequel watch est appliquée) et une fonction callback à exécuter à chaque changement de propriété : watch(property, callback).
La
fonction callback est elle-même de type WatchCallback.
Cela signifie d’après la documentation que la fonction callback peut prendre en
argument la valeur issue du changement de la propriété de l’objet surveillée et
l’ancienne valeur. Ici pas besoin, à n’importe quelle valeur de la propriété,
on agit.
Au lieu d’écouter les événements
pour savoir quand des modifications ont été apportées à un objet, on va pouvoir
simplement surveiller les modifications sur les propriétés elles-mêmes, grâce
aux accesseurs.
La méthode watch() retourne un objet watchHandle.
Lorsque l’on applique la méthode watch
à un objet, on peut donc stocker le résultat dans une variable. On peut alors
appliquer une méthode spécifique à cet objet watchHandle, la méthode remove(),
pour stopper la surveillance de la propriété de l’objet en question.
Lorsque l’on sélectionne un fond d’imagerie, je
souhaite ici que ma couche de polygones devienne transparente, et que seuls les
contours soient visibles pour que je puisse voir l’image en dessous. La couche
de polygones est d’abord opaque.
Pour cela, je vais utiliser la
méthode watch() et surveiller le
changement de propriété du titre du fond de carte. Nous allons faire 2 choses :
-
Dans un premier temps, lorsque le nom de la
basemap change, cela signifie qu’on a choisi une nouvelle basemap dans le
widget, on va alors fermer ce widget.
-
La deuxième chose que l’on souhaite faire, c’est
appliquer la transparence lorsque le fond de carte sélectionné est un fond de
carte d’imagerie.
On accède à la propriété du nom du fond de carte avec view.map.basemap.title. Sachant que la méthode watch() va s’appliquer sur l’objet view on a alors simplement :
On accède à la propriété du nom du fond de carte avec view.map.basemap.title. Sachant que la méthode watch() va s’appliquer sur l’objet view on a alors simplement :
view.watch("map.basemap.title",function(){
widgetExpand.collapse(); //fermeture du widget Expand dès qu’une basemap est sélectionnée.
// changement de symbologie quand couche d’imagerie.
})
Pour fermer le widget, la classe Expand permet d’appliquer la méthode collapse()
à l’instance widgetExpand que nous
avons créée, pour fermer le widget.
Changement de symbologie pour rendre les polygones transparents
On ne veut appliquer la
transparence que si le fond de carte sélectionné dans le widget basemapGallery() est une imagerie. Il y
a plusieurs manières de procéder. Ici, nous allons utiliser la méthode toJSON()
qui s’applique à un fond de carte. Cette méthode retourne un objet JSON
contenant des informations sur la basemap. Stockons-le dans une variable.
Regardons ensuite ce que nous
donne le JSON dans la console à l’aide de maj+ctrl+I à l’aide d’un
console.log(varJSON) dans la fonction déclenchée par le watch.
En le parcourant, dans la
console, on remarque une propriété qui peut nous intéresser dans baseMapLayers[0] qui est la propriété title. Quand on regarde le fond de
carte « Imagerie » et « Imagery Hybrid » dans le widget, ce
title reste le même :
« World Imagery ». En revanche pour les autres fonds de carte, la
propriété change comme par exemple « World Street Map ». On va donc
se baser sur cette propriété pour procéder à la transparence.
let varJSON=map.basemap.toJSON();
if (varJSON.baseMapLayers[0].title=="World Imagery"){
//appliquer la transparence
}
else{
//rester normal ou revenir comme avant (il a pu y avoir un passage par la transparence)
}
Pour appliquer la transparence,
je change directement la propriété renderer
de la couche. Pour éditer la capacité de remplissage d’un polygone, je choisis
le type « simple » qui
permet l’autocasting de la symbologie comme un nouveau SimpleRender() puis je
change la propriété de symbol en simple-fill pour autocasts as new SimpleFillSymbol(),
j’applique une transparence dans la propriété color.
view.watch("map.basemap.title",function(){
widgetExpand.collapse();
Layer.renderer = {
type: "simple",
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [ 51,51, 204, 0.4 ], //last number is the opacity rate
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width:1
}
}
};
Comme d’habitude retrouvez tout
le code sur mon Github.
Pour voir directement à quoi ressemble l'application, vous pouvez cliquer ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Pour voir directement à quoi ressemble l'application, vous pouvez cliquer ici.
Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.
Aucun commentaire:
Enregistrer un commentaire