Abrace seu GroupLayer

ReneRubalcava

<\/HEAD>

No ArcGIS API 4 para JavaScript, um novo tipo de layer foi introduzido para ajudar você a gerenciar o agrupamento de seus layers em categorias com ideias semelhantes<\/EM>. O GroupLayer<\/A> oferece uma funcionalidade realmente interessante para você fazer praticamente exatamente o que diz, agrupar seus layers<\/EM>.<\/P><\/P>Vamos supor que você tenha um Dynamic Map Service, como por exemplo este serviço NOAA Storm Reports<\/A>. Este é um serviço útil que fornece uma visão rápida dos relatórios de tempestades. No entanto, é um dynamic map service, que normalmente seria exibido em um MapImageLayer<\/A>, porém este tipo de layer (anteriormente conhecido como ArcGISDynamicMapServiceLayer) não suporta popups na versão inicial 4.0.<\/P>

<\/P>

É concebível que os dados por trás desses pontos possam ser úteis, então você pode querer exibir popups para eles em sua aplicação.<\/P>

<\/P>

Existe uma maneira fácil de contornar isso, você poderia usar cada layer individual no serviço como um

FeatureLayer<\/A> e definir popups e tudo volta ao normal. Mas talvez você tenha alguma lógica em sua aplicação que exija tratar esses dados como um único layer, como desligá-los todos com o clique de um botão.<\/P>

<\/P>

Agora você vai querer abraçar seu GroupLayer.<\/EM><\/P><\/P>Vamos ver como o código para isso pode ser.<\/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>";<\/<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 = [
    "Relatórios de Tempestade NOAA HAIL (24 horas)",
    "Relatórios de Tempestade NOAA TORNADO (24 horas)",
    "Relatórios de Tempestade NOAA WIND (24 horas)",
    "Relatórios de Tempestade NOAA TORNADO (última semana)"
  ];

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

<\/<P> 1O que fizemos aqui foi adicionar os dados do Relatório de Tempestades como FeatureLayers individuais, mas os agrupamos em um GroupLayer. Depois adicionamos um botão simples na UI que faz uma coisa. Ele alterna a visibilidade dos dados agrupados da tempestade ligado e desligado. Note que defini o visibilityMode<\/<SPAN> do GroupLayer para "inherited"<\/<SPAN>. Isso significa que todos os sublayers herdarão sua visibilidade do GroupLayer pai. Você poderia mudar isso se quisesse alguma visibilidade condicional dos layers no GroupLayer e ficar sofisticado, mas para este caso de uso, tudo simplesmente funciona.<\/<P> 1 1Você pode ver uma

demonstração ao vivo desta aplicação aqui<\/<A>.<\/<P> 1

1Você não está limitado a agrupar FeatureLayers com o GroupLayer, você poderia agrupar qualquer tipo de layer, o que pode ser muito conveniente ao controlar a visibilidade de múltiplos serviços de mapa em sua aplicação.<\/<P> 1

1Então experimente o GroupLayer na sua próxima aplicação ArcGIS API 4 para JavaScript!<\/<P> 1

1Para mais dicas e truques geodev,

confira meu blog<\/<A>.<\/<P> 1

1Foto do título via Mel Aclaro em

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