Rechercher dans le blog

Enrichissez vos cartes Web avec des couches !

by in ,

Dans le précédent article on a vu comment créer une carte web. On a ajouté notre premier élément à la carte : les fonds de cartes. Mais une carte ne se limite pas uniquement à cela, ce qui fait tout son intérêt, c’est la possibilité d’ajouter des éléments sur notre carte qui ont eux-mêmes des propriétés que nous pouvons consulter : les couches.

Mais c'est quoi une couche ?

Dans ArcGIS, les cartes sont composées d'une série de couches affichées dans un ordre particulier. Une couche définit la manière dont un jeu de données est symbolisé et étiqueté (c’est-à-dire représenté) dans vos vues cartographiques.
Une couche représente des données géographiques. On peut donc les placer sur des cartes et elles peuvent avoir de nombreuses données descriptives (nombres, chaine de caractères …), stockées dans un tableau qu’on appelle table attributaire. Les  routes, les frontières politiques, les parcelles, les bâtiments, les POI et l'imagerie aérienne constituent quelques exemples de couches. Tout ce qui peut être mis sur une carte peut constituer une couche. Ces couches peuvent être de plusieurs types, qui ont chacun leurs spécificités, dont les 2 principaux sont : 
- les classes d’entités (Feature Layer)
- les couches de services d’images (Map Image Layer)

Trouver des couches dans ArcGIS Online

Dans la vidéo de mon article précédent, on a vu ensemble que lorsqu’on crée un compte ArcGIS for Developers, on crée automatiquement un compte ArcGIS Online. Vous pouvez également consulter ce tutoriel pour vous rafraîchir la mémoire sur la création de compte ArcGIS for Developers.
Les éléments qu’on va ajouter, qu’on appelle couches, peuvent provenir d’ArcGIS Online. En effet, sur cette plateforme vous pouvez créer, partager du contenu avec des personnes, certains groupes et même le public. Et vous pouvez également accéder à des contenus divers et variés, notamment grâce à un atlas dynamique. On a de la chance, un contenu immense est disponible gratuitement sur le portail ArcGIS Online ! Vous n’avez qu’à taper un mot clé pour trouver votre bonheur.
Connectez-vous à ArcGIS Online. Une fois connecté, dans l’onglet « Contenus », vous pouvez cliquer sur l’onglet Atlas dynamique et chercher un contenu dans la barre de recherche. Cherchons par exemple « solar energy areas ». Ensuite cliquez dessus.


Vous avez alors le choix de l’ouvrir dans la visionneuse de carte (ou de scène si l’élément est en 3D). 


On remarque que l’URL est de la forme suivante : https://www.arcgis.com/home/item.html?id=
On va pouvoir utiliser la couche dans notre application grâce à cette URL. Dans l’URL ci-dessus on distingue un « ? » qui est le marqueur d’une requête, puis juste après un paramètre qu’on appelle clé qui demande une valeur via le « = ». Si on change l’URL et que l’on cherche un id qui a la valeur : 33fc2fa407ab40f9add12fe38d5801f5 par exemple, on obtient la couche suivante : Trailheads_Styles_Popups.
Vous pouvez la visualiser dans la visionneuse de carte pour voir à quoi elle ressemble. On distingue de nombreux points de Trail à l’ouest de Los Angeles. Si cette couche vous convient, alors on l’ajoute à notre application. Vous pouvez trouver de nombreux exemples d’autres couches à ajouter ou via l’Atlas dynamique.

Ajouter des items du portail ArcGIS Online dans votre carte web

Pour ajouter des couches à notre carte, il faut définir une nouvelle classe dans le require. En fonction du type de couches que l’on veut ajouter, cette classe peut variée. Ici, il faut donner dans le require le chargement du module Layer, puis ajouter le mot clé à la fonction :
 
require(["esri/Map","esri/views/MapView","esri/layers/Layer"], function(Map, MapView, Layer)

Pour créer une couche dans notre application,  on se base sur celle que nous avons vue dans ArcGIS Online grâce à son id. On crée une variable avec l’objet Layer et la méthode fromPortalItem pour accéder au calque Trailheads (points). Dans la documentation https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html#fromPortalItem on voit que la méthode fromPortalItem nécessite en paramètre l’objet portalItem, allons-nous documenter sur cette propriété : https://developers.arcgis.com/javascript/latest/api-reference/esri-portal-PortalItem.html

Il faut donc un id pour identifier la couche qu’on veut, ça tombe bien cet id est celui qu’on a mis dans l’URL ! À l’intérieur de cette méthode on y définit donc la propriété id de portalItem sur 33fc2fa407ab40f9add12fe38d5801f5
Enfin on utilise la fonction addLayer qu’on a créée pour ajouter la couche à la carte. On aurait très bien pu utiliser la méthode map.add().
 
var trailheadsPortalItem = Layer.fromPortalItem({
        portalItem: {
          id: "33fc2fa407ab40f9add12fe38d5801f5"
        }
      });
On ajoute ensuite la couche à notre variable map créée à partir de la classe Map grâce à la méthode add. On donne 2 propriétés à la méthode map.add, la première étant la couche qu’on ajoute. La deuxième est la position à laquelle on veut mettre la couche dans l’ordre d’affichage. C’est utile lorsqu’on a plusieurs couches à gérer et qu’on veut éviter que certaines couches soit en dessous d’autres couches qui prennent plus d’espace et risquent de recouvrir des informations.
En effet on peut avoir un point représentant un restaurant par exemple, et un polygone plein représentant un quartier, si le quartier est mis en position 1 alors le restaurant en position 2 sera caché par le polygone. En inversant les positions, le restaurant sera visible sur le polygone. Si vous faites un peu de Photoshop, traitement photos, graphisme, c’est exactement le même concept que les calques !
   
map.add(trailheadsPortalItem, 0);
Cet exemple est retrouvable dans mon github. Cliquez ici pour visualiser l'application.


Les Feature Layers/ classes d'entités

Il y a d’autres moyens pour ajouter des couches dans votre code. Il existe de nombreux types de couches. Chacun a sa propre classe et il faut donc bien la définir dans le require. Là encore la documentation est très importante pour savoir comment importer la classe, quelles seront les propriétés à définir… Le type de couche le plus utilisé est la classe d’entités (Feature Layer). On doit importer la classe dont on a besoin dans notre code. On importe donc la classe Map et MapView et une nouvelle venue, FeatureLayer !
 
"esri/Map", "esri/views/MapView », « esri/layers/FeatureLayer »

On définit ensuite le paramètre associé à la fonction qui suit comme d’habitude :
 
require (["esri/Map", "esri/views/MapView", « esri/layers/FeatureLayer »], function(Map, Mapview, Featurelayer){}
Vous allez maintenant pouvoir ajouter une couche de classe d’entités à votre carte. Dans ArcGIS Online, la couche https://www.arcgis.com/home/item.html?id=33fc2fa407ab40f9add12fe38d5801f5 est en fait rattachée à un service. Lorsque vous cliquez dessus vous accédez à l’API REST.
On peut donc ajouter cet url dans la propriété de la Feature Layer (classe d’entités).
 
      // Trailheads feature layer (points)
      var trailheadsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0"
      });

      map.add(trailheadsLayer);
On va maintenant ajouter les parcours de trail et les parcs associés de la même manière :
https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0
https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer/0
Cet exemple est retrouvable dans mon github. Cliquez ici pour visualiser l'application.

Limiter les entités de couche avec une expression de définition SQL

Vous pouvez mettre à jour les propriétés de la couche en définissant les valeurs avant son chargement. Par exemple, vous pouvez mettre à jour la fenêtre contextuelle, le rendu en limitant l’affichage. Mettons à jour la couche pour limiter les données renvoyées par un service d'entités hébergé en appliquant une expression de définition SQL à la couche d'entités. 
Si on regarde les attributs de la couche de trails https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0 dans la visionneuse de carte, on peut distinguer un attribut ELEV_GAIN correspondant à l’élévation du parcours.
On va pouvoir par exemple définir une expression SQL qui limite les lignes de suivi à celles dont l'altitude est inférieure à 250 m.
 
      // Trails feature layer (lines)
      var trailsLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0",
        //*** ADD ***//
        definitionExpression: "ELEV_GAIN < 250"
      });
Cet exemple est retrouvable dans mon github. Cliquez ici pour visualisation l'application.
Il existe d’autres types de couches. Dans la documentation, on a des informations sur de nombreux types de couches comme les flux en temps réels , les couches de tuiles(TileLayer) afin d’avoir un accès simple et rapide à votre couche ou les Map Image Layer. Nous les verrons ultérieurement !
Dans le prochain article nous verrons comment réaliser une carte 3D avec des couches, puis nous verrons comment styliser nos éléments sur la carte avec la symbologie dans la semaine prochaine !
par
Labels: ,

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)