Serrez votre GroupLayer

ReneRubalcava

<\/HEAD>

Dans l'ArcGIS API 4 pour JavaScript, un nouveau type de couche a été introduit pour vous aider à gérer le regroupement de vos couches en catégories similaires<\/EM>. Le GroupLayer<\/A> offre des fonctionnalités vraiment intéressantes pour faire exactement ce qu'il dit, regrouper vos couches<\/EM>.<\/P><\/P>Supposons que vous ayez un service de carte dynamique, comme par exemple ce service NOAA Storm Reports<\/A>. C'est un petit service pratique qui donne un aperçu rapide des rapports de tempête. Cependant, c'est un service de carte dynamique, qui serait normalement affiché dans une MapImageLayer<\/A>, mais ce type de couche (anciennement connu sous le nom ArcGISDynamicMapServiceLayer) ne supporte pas les popups dans la version initiale 4.0.<\/P>

<\/P>

Il est concevable que les données derrière ces points puissent être utiles, donc vous pourriez vouloir afficher des popups pour eux dans votre application.<\/P>

<\/P>

Il y a une solution simple, vous pourriez simplement utiliser chaque couche individuelle du service comme une

FeatureLayer<\/A> et vous pouvez définir des popups et tout est à nouveau en ordre. Mais peut-être avez-vous une logique dans votre application qui nécessite de traiter ces données comme une seule couche, par exemple pour toutes les désactiver d'un clic.<\/P>

<\/P>

Maintenant vous allez vouloir serrer votre GroupLayer.<\/EM><\/P><\/P>Regardons à quoi pourrait ressembler le code pour cela.<\/P><\/P>require([
  "esri\/Map",
  "esri\/views\/MapView",
  "esri\/layers\/FeatureLayer",
  "esri\/layers\/GroupLayer"
], function (Map, MapView, FeatureLayer, GroupLayer) {
  var url = "

http:\/\/tmservices1.esri.com\/arcgis\/rest\/services\/LiveFeeds\/NOAA_storm_reports\/MapServer\/<\/<SPAN>";


  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-98.648, 36.374],
    zoom: 5,
    ui: {
      components: ["zoom", "attribution", "compass"]
    }
  });

  var titles = [
    "Rapports de tempête NOAA GRÊLE (24 heures)",
    "Rapports de tempête NOAA TOURELLES (24 heures)",
    "Rapports de tempête NOAA VENT (24 heures)",
    "Rapports de tempête NOAA TOURELLES (semaine passée)"
  ];

  var layers = ["0", "1", "2", "3"].map(function(index, idx) {
    return new FeatureLayer({
      url: url + index,
      outFields: ["*"],
      popupTemplate: {
        title: titles[idx],
        content: "{*}"
      }
    });
  });

  var groupLayer = new GroupLayer({
    layers: layers,
    visibilityMode: "inherited",
    visible: true
  });
  map.add(groupLayer);

  view.then(function() {
    var btn = document.createElement("div");
    btn.className = "esri-button esri-widget-button esri-interactive esri-icon-feature-layer";
    btn.title = "Basculer les données de tempête";
    view.ui.add(btn, "top-right");
    btn.addEventListener("click", function() {
      groupLayer.visible = !groupLayer.visible;
    });
  });
});<\/PRE>

<\/P>

Ce que nous avons fait ici est d'ajouter les données des rapports de tempête en tant que FeatureLayers individuels, mais nous les avons enveloppés dans un GroupLayer. Ensuite, nous avons ajouté un simple bouton à l'interface utilisateur qui fait une chose. Il bascule la visibilité des données de tempête regroupées activée ou désactivée. Remarquez que j'ai défini le visibilityMode<\/SPAN> du GroupLayer sur "inherited"<\/SPAN>. Cela signifie que toutes les sous-couches hériteront de leur visibilité du GroupLayer parent. Vous pourriez changer cela si vous vouliez une visibilité conditionnelle des couches dans le GroupLayer et devenir sophistiqué, mais pour ce cas d'utilisation, tout fonctionne simplement.<\/P><\/P>Vous pouvez voir une

démonstration en direct de cette application ici<\/A>.<\/P>

<\/P>

Vous n'êtes pas limité à envelopper des FeatureLayers avec le GroupLayer, vous pouvez regrouper n'importe quel type de couche, ce qui peut s'avérer très pratique pour contrôler la visibilité de plusieurs services cartographiques dans votre application.<\/P>

<\/P>

Alors essayez le GroupLayer dans votre prochaine application ArcGIS API 4 pour JavaScript !<\/P>

<\/P>

Pour plus d'astuces geodev,

consultez mon blog<\/A>.<\/P>

<\/P>

Photo titre via Mel Aclaro à

group hug | Flickr - Photo Sharing!<\/<\/A> <\/<EM>\/<\/<SPAN>\/<\/<P>\/<\/<BODY>\/<\/<HTML>