Abraza tu GroupLayer

ReneRubalcava

<\/HEAD>

En la ArcGIS API 4 para JavaScript, se introdujo un nuevo tipo de capa para ayudarte a gestionar la agrupación de tus capas en categorías afines<\/EM>. El GroupLayer<\/A> ofrece una funcionalidad realmente interesante para que hagas prácticamente exactamente lo que dice, agrupar tus capas<\/EM>.<\/P><\/P>Supongamos que tienes un Servicio de Mapa Dinámico, como por ejemplo este servicio de Informes de Tormentas NOAA<\/A>. Este es un pequeño servicio útil que ofrece una visión rápida de los informes de tormentas. Sin embargo, es un servicio de mapa dinámico, que normalmente se mostraría en un MapImageLayer<\/A>, pero este tipo de capa (anteriormente conocido como ArcGISDynamicMapServiceLayer) no soporta ventanas emergentes en la versión inicial 4.0.<\/P>

<\/P>

Es concebible que los datos detrás de estos puntos puedan ser útiles, por lo que podrías querer mostrar ventanas emergentes para ellos en tu aplicación.<\/P>

<\/P>

Hay una forma fácil de solucionar eso, podrías usar cada capa individual del servicio como un

FeatureLayer<\/A> y puedes definir ventanas emergentes y el mundo vuelve a estar bien. Pero tal vez tienes alguna lógica en tu aplicación que requiere tratar estos datos como una sola capa, como apagarlas todas con un clic de botón.<\/P>

<\/P>

Ahora querrás abrazar tu GroupLayer.<\/EM><\/P><\/P>Veamos cómo podría verse el código para eso.<\/P><\/P>require([\n  "esri\/Map",\n  "esri\/views\/MapView",\n  "esri\/layers\/FeatureLayer",\n  "esri\/layers\/GroupLayer"\n], function (Map, MapView, FeatureLayer, GroupLayer) {\n  var url = "

http:\/\/tmservices1.esri.com\/arcgis\/rest\/services\/LiveFeeds\/NOAA_storm_reports\/MapServer\/<\/A>";<\/SPAN>\n\n  var map = new Map({\n    basemap: "streets"\n  });\n\n  var view = new MapView({\n    container: "viewDiv",\n    map: map,\n    center: [-98.648, 36.374],\n    zoom: 5,\n    ui: {\n      components: ["zoom", "attribution", "compass"]\n    }\n  });\n\n  var titles = [\n    "Informes de Granizo NOAA (24 horas)",\n    "Informes de Tornado NOAA (24 horas)",\n    "Informes de Viento NOAA (24 horas)",\n    "Informes de Tornado NOAA (última semana)"\n  ];\n\n  var layers = ["0", "1", "2", "3"].map(function(index, idx) {\n    return new FeatureLayer({\n      url: url + index,\n      outFields: ["*"],\n      popupTemplate: {\n        title: titles[idx],\n        content: "{*}"\n      }\n    });\n  });\n\n  var groupLayer = new GroupLayer({\n    layers: layers,\n    visibilityMode: "inherited",\n    visible: true\n  });\n  map.add(groupLayer);\n\n  view.then(function() {\n    var btn = document.createElement("div");\n    btn.className = "esri-button esri-widget-button esri-interactive esri-icon-feature-layer";\n    btn.title = "Alternar Datos de Tormenta";\n    view.ui.add(btn, "top-right");\n    btn.addEventListener("click", function() {\n      groupLayer.visible = !groupLayer.visible;\n    });\n  });\n});<\/PRE>

<\/P>

Lo que hemos hecho aquí es añadir los datos del Informe de Tormentas como FeatureLayers individuales, pero los hemos envuelto en un GroupLayer. Luego añadimos un botón simple a la interfaz que hace una cosa. Alterna la visibilidad de los datos agrupados de tormentas encendido y apagado. Observa que configuré el visibilityMode<\/SPAN> del GroupLayer a "inherited"<\/SPAN>. Esto significa que todas las subcapas heredarán su visibilidad del GroupLayer padre. Podrías cambiar esto si quisieras alguna visibilidad condicional de capas en el GroupLayer y ponerte creativo, pero para este caso de uso, todo simplemente funciona.<\/P><\/P>Puedes ver una

demostración en vivo de esta aplicación aquí<\/A>.<\/P>

<\/P>

No estás limitado a envolver FeatureLayers con el GroupLayer, podrías agrupar cualquier tipo de capa, lo cual podría ser muy conveniente al controlar la visibilidad de múltiples servicios de mapas en tu aplicación.<\/P>

<\/P>

¡Así que prueba el GroupLayer en tu próxima aplicación ArcGIS API 4 para JavaScript!<\/P>

<\/P>

Para más consejos y trucos geodev,

visita mi blog<\/A>.<\/P>

<\/P>

Foto principal vía Mel Aclaro en

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