Umarme Ihre GroupLayer

ReneRubalcava

<\/HEAD>

In der ArcGIS API 4 for JavaScript wurde ein neuer Layer-Typ eingeführt, der Ihnen dabei hilft, Ihre Layer in gleichgesinnte<\/EM> Kategorien zu gruppieren. Der GroupLayer<\/A> bietet einige wirklich interessante Funktionen, mit denen Sie genau das tun können, was der Name sagt: gruppieren Sie Ihre Layer<\/EM>.<\/P><\/P>Angenommen, Sie haben einen Dynamic Map Service, wie zum Beispiel diesen NOAA Storm Reports service<\/A>. Dies ist ein praktischer kleiner Service, der einen schnellen Überblick über Sturmberichte gibt. Es handelt sich jedoch um einen dynamischen Kartenservice, der normalerweise in einem MapImageLayer<\/A> angezeigt wird. Dieser Layer-Typ (früher bekannt als ArcGISDynamicMapServiceLayer) unterstützt jedoch in der ersten 4.0-Version keine Popups.<\/P>

<\/P>

Es ist denkbar, dass die Daten hinter diesen Punkten nützlich sein könnten, sodass Sie möglicherweise Popups für sie in Ihrer Anwendung anzeigen möchten.<\/P>

<\/P>

Es gibt eine einfache Lösung dafür: Sie könnten jeden einzelnen Layer im Service als

FeatureLayer<\/A> verwenden und Popups definieren, und alles wäre wieder in Ordnung. Aber vielleicht haben Sie eine Logik in Ihrer Anwendung, die erfordert, dass Sie diese Daten als einen einzigen Layer behandeln, zum Beispiel um sie alle mit einem Klick auszuschalten.<\/P>

<\/P>

Jetzt wollen Sie Ihren GroupLayer umarmen.<\/EM><\/P><\/P>Schauen wir uns an, wie der Code dafür aussehen könnte.<\/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 = [
    "NOAA HAIL Storm Reports (24 Stunden)",
    "NOAA TORNADO Storm Reports (24 Stunden)",
    "NOAA WIND Storm Reports (24 Stunden)",
    "NOAA TORNADO Storm Reports (letzte Woche)"
  ];

  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 = "Sturm-Daten umschalten";
    view.ui.add(btn, "top-right");
    btn.addEventListener("click", function() {
      groupLayer.visible = !groupLayer.visible;
    });
  });
});<\/PRE>

<\/P>

Was wir hier gemacht haben, ist die Sturmberichtsdaten als einzelne FeatureLayers hinzuzufügen, aber wir haben sie in einem GroupLayer zusammengefasst. Dann haben wir der UI eine einfache Schaltfläche hinzugefügt, die genau eine Sache tut: Sie schaltet die Sichtbarkeit der gruppierten Sturmdaten ein und aus. Beachten Sie, dass ich den visibilityMode<\/SPAN> des GroupLayers auf "inherited"<\/SPAN> gesetzt habe. Das bedeutet, dass alle Sublayer ihre Sichtbarkeit vom übergeordneten GroupLayer erben. Sie könnten dies ändern, wenn Sie eine bedingte Sichtbarkeit von Layern im GroupLayer wünschen und es ausgefeilter machen wollen, aber für diesen Anwendungsfall funktioniert alles einfach.<\/P><\/P>Sie können eine

Live-Demo dieser Anwendung hier sehen<\/A>.<\/P>

<\/P>

Sie sind nicht darauf beschränkt, nur FeatureLayers mit dem GroupLayer zu gruppieren. Sie könnten beliebige Layer-Typen gruppieren, was sehr praktisch sein kann, wenn Sie die Sichtbarkeit mehrerer Kartendienste in Ihrer Anwendung steuern möchten.<\/P>

<\/P>

Probieren Sie also den GroupLayer in Ihrer nächsten ArcGIS API 4 for JavaScript-Anwendung aus!<\/P>

<\/P>

Für weitere geodev Tipps und Tricks besuchen Sie

meinen Blog.<\/P><\/P>Titelbild von Mel Aclaro bei group hug | Flickr - Photo Sharing!<\/<\/<EM>

<\/<BODY>