Omarm je GroupLayer

ReneRubalcava

<\/HEAD>

In de ArcGIS API 4 voor JavaScript is een nieuw laagtype geïntroduceerd om je te helpen bij het groeperen van je lagen in gelijke gedachten categorieën. De GroupLayer biedt enkele echt interessante functionaliteiten waarmee je vrijwel precies kunt doen wat het zegt, groepeer je lagen.<\/P>

<\/P>

Laten we aannemen dat je een Dynamic Map Service hebt, zoals bijvoorbeeld deze NOAA Storm Reports service. Dit is een handige kleine service die een snel overzicht geeft van stormrapporten. Het is echter een dynamic map service, die normaal gesproken wordt weergegeven in een MapImageLayer, maar dit laagtype (voorheen bekend als ArcGISDynamicMapServiceLayer) ondersteunt geen pop-ups in de initiële 4.0 release.<\/P>

<\/P>

Het is voorstelbaar dat de data achter deze punten nuttig kan zijn, dus wil je misschien pop-ups voor ze weergeven in je applicatie.<\/P>

<\/P>

Er is een gemakkelijke oplossing: je kunt elke individuele laag in de service gebruiken als een FeatureLayer en dan kun je pop-ups definiëren en is alles weer in orde. Maar misschien heb je wat logica in je applicatie die vereist dat je deze data als één enkele laag behandelt, bijvoorbeeld om ze allemaal uit te schakelen met één klik op een knop.<\/P>

<\/P>

Nu wil je je GroupLayer omarmen.<\/EM><\/P><\/P>Laten we eens kijken hoe de code daarvoor eruit zou kunnen zien.<\/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 uur)",
    "NOAA TORNADO Storm Reports (24 uur)",
    "NOAA WIND Storm Reports (24 uur)",
    "NOAA TORNADO Storm Reports (afgelopen week)"
  ];

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

<\/P>

Wat we hier hebben gedaan is de Storm Report data toegevoegd als individuele FeatureLayers, maar we hebben ze verpakt in een GroupLayer. Vervolgens hebben we een eenvoudige knop aan de UI toegevoegd die één ding doet. Het schakelt de zichtbaarheid van de gegroepeerde stormdata aan en uit. Merk op dat ik de visibilityMode<\/SPAN> van de GroupLayer heb ingesteld op "inherited"<\/SPAN>. Dit betekent dat alle sublagen hun zichtbaarheid erven van de bovenliggende GroupLayer. Je zou dit kunnen veranderen als je voorwaardelijke zichtbaarheid van lagen in de GroupLayer wilt toepassen en het geavanceerder wilt maken, maar voor deze use case werkt alles gewoon.<\/P><\/P>Je kunt een

live demo van deze applicatie hier bekijken<\/<\a>.<\/<p>\r\r

Je bent niet beperkt tot het groeperen van FeatureLayers met de GroupLayer, je kunt elk type laag groeperen, wat erg handig kan zijn bij het beheren van de zichtbaarheid van meerdere kaartservices in je applicatie.<\/<p>\r\r

Dus probeer de GroupLayer uit in je volgende ArcGIS API 4 voor JavaScript applicatie!<\/<p>\r\r

Voor meer geodev tips en trucs,

bekijk mijn blog.<\/<p>\r\rTitel foto via Mel Aclaro op group hug | Flickr - Photo Sharing!