Cómo hacer un ToC

ReneRubalcava

<\/HEAD>

<\/P>

Ok, hablemos del ToC<\/EM>.<\/P>Agregar un widget de Tabla de Contenidos\/Leyenda a los mapas web de ArcGIS es una de esas cosas que desafortunadamente es un mal necesario. Realmente creo que deberías esforzarte por diseñar tu mapa y tu aplicación de tal manera que no se necesite un ToC. Pero a veces, en esos peores momentos<\/EM>, tienes que hacer lo que tienes que hacer.<\/P><\/P>Soy culpable de ello<\/A>. Soy consciente de que los usuarios pueden quererlo y los desarrolladores tienen que lidiar con ello. Incluso añadí un ejemplo en un capítulo<\/A> a mi libro ArcGIS WebDev<\/A>.<\/P>

<\/P>

Las preguntas en el foro siempre parecen surgir sobre esto. Este

Widget ToC<\/A> de nilu parece ser bastante popular. Es un widget genial, con montones de características, generalmente cosas buenas.<\/P>

<\/P>

Aprende a manejar el ToC<\/H2>Pero tú como desarrollador deberías tener una idea de cómo se construye un widget ToC<\/EM>. Explico los conceptos en el capítulo de muestra enlazado arriba<\/A> de mi libro<\/A>. Pero aquí están los pasos básicos.<\/P>

<\/P>

• Haz una solicitud al

endpoint legend del MapService<\/A>.<\/LI>Analiza la respuesta legend en una lista bella apariencia<\/EM> de las capas.<\/LI>Conecta eventos click para activar/desactivar capas.<\/LI>Bono - Conecta eventos click para activar/desactivar subcapas.<\/EM><\/LI>¡Haz el baile feliz!<\/LI><\/UL><\/P><\/P>Eso es todo. ¿Simple, verdad?<\/EM><\/P>Probablemente hay una docena de maneras diferentes en las que podrías lograr esto. Podrías usar el dijit/Menu<\/A>, podrías usar un dijit/Tree<\/A>, podrías simplemente usar elementos DOM regulares, tú eliges.<\/P>

<\/P>

Aquí hay algo de código que hace justo esto.<\/P>

define([\n  'dojo\/_base\declare',\n  'dojo\/_base\Deferred',\n  'dojo\/_base\on',\n  'dojo\/_base\topic',\n  'dojo\/_base\query',\n  'dojo\/_base\dom',\n  'dojo\/_base\dom-attr',\n  'put-selector',\n  'dojo\/_base\dom-class',\n  'dojo\/_base\Evented',\n  'esri/lang',\n  '.\/_layerservice',\n  'dojox/lang/functional/curry',\n  'dijit\/_WidgetBase',\n  'dijit\/_TemplatedMixin',\n  'dojo/text!.\/_templates/layertoc.tpl.html'\n], function(\n  declare, Deferred, on, topic,\n  query, dom, domAttr, put, domClass,\n  Evented, esriLang,\n  getLayers, curry,\n  _WidgetBase, _TemplatedMixin,\n  template\n) {\n  var labelName = curry(function(a, b) {\n    if (b.label && b.label.length > 1) {\n      return b.label;\n    } else if (a.layerName && a.layerName.length) {\n      return a.layerName;\n    } else {\n      return 'Elemento Capa';\n    }\n  });\n  var sub = esriLang.substitute;\n  var layertitle = '<span class=\\"pull-right\\">${title}</span>';\n  return declare([_WidgetBase, _TemplatedMixin, Evented], {\n    templateString: template,\n    postCreate: function() {\n      var node = dom.byId('map_root');\n      put(node, this.domNode);\n      var map = this.get('map');\n      var layerIds = this.get('layerIds');\n      \/ map over the layer ids and pull \u0000 \/ the layers designated as part of legend \u0000 \n      this.tocLayers = map.layerIds.map(function(x) {\n        if (layerIds.indexOf(x) > -1) {\n          return map.getLayer(x);\n        } else {\n          return false;\n        }\n  &nbsp.&nbpsp;}).filter(function(a) { return a; });


  {
        var tbl = put(pbody, 'table.table');
        // iterar sobre las capas y
        // agregar elementos a la tabla
        layers.map(function(a) {
          var lbl = labelName(a);
          var layerId;
          var hasLayerId = false;
          if (a.hasOwnProperty('layerId')) {
            hasLayerId = true;
            layerId = a.layerId;
          }
          // iterar sobre la leyenda y agregar elementos
    &nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // a la fila de la tabla
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; a.legend.map(function(b) {
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var tr = put(tbl, 'tr');
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; if (hasLayerId) {
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; hasLayerId = false;
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; var lyrCheck = put(
&nbsp.& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 'span.glyphicon.glyphicon-ok' +
&nbsp.& nbsp.  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  '.sublayer-item[data-layer-id=' + id + ']' +
&nbsp.& nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  '.[data-sublayer-id=' + layerId + ']'
&nbsp.& nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;
&nbsp.& nb sp );
&nbsp.& nb sp ;  & nb sp ;  & nb sp ;  & nb sp ;  put(tr, 'td', lyrCheck);
&nbsp.& nb sp ; } else {
&nbsp.& nb sp ;  put(tr, 'td');
&nbsp.& nb sp ; }
&nbsp.& nb sp ; var td1 = put(tr, 'td.layer-image');
&nbsp.& nb sp ; put(tr, 'td', {
&nbsp.& nb sp ;   innerHTML: lbl(b)
&nbsp.& nb sp ; });
&nbsp.& nb sp ; // Solo agrego la imagen base64, pero también podrías
&nbsp.& nb sp ; // usar la URL de la imagen proporcionada en el endpoint Legend
&nbsp.& nb sp ; put(td1, 'img', {
&nbsp.& nb sp ;   src: 'data:image/png;base64,' + b.imageData
&nbsp.& nb sp ; });
&nbsp.& nb sp });
&nbsp.& nb sp });
&nbsp. }, function(err) { console.debug('error in request', err); });
&nbsp. }
});
});

Vaya, eso es mucho código. Oye, querías aprender sobre un widget ToC, eso va a tomar un poco de código. Agregué algunos comentarios para ayudarte. Podrías dividir parte de la funcionalidad en módulos más pequeños, pero eso lo dejo a tu criterio.

Estoy usando

put-selector en este ejemplo para crear elementos DOM (está incluido en el ArcGIS JS API) simplemente porque me parece más lógico al componer la creación del DOM. También uso Bootstrap para que se vea bien, que es donde se definen algunos nombres de clases css.Cuando todo esté listo, este ejemplo se verá algo así.Bastante elegante

Lo que esto hace es desactivar servicios individuales y las capas individuales en visibleLayers. Este ejemplo está configurado solo para un ArcGISDynamicMapServiceLayer, pero podrías ajustarlo para FeatureLayers y si eres audaz agregar soporte para renderizadores personalizados. Trato de evitar esto cuando puedo porque siempre parece que arruino algo, pero se puede hacer. Buena suerte. Recuerdo que esto era mucho más difícil hace tiempo cuando lo hice en Flex, ya que no creo que el REST API tuviera un endpoint Legend entonces, así que esto es realmente más fácil de lo que habría sido.

Solo quería darte una buena visión general de cómo puedes acceder al endpoint legend de un servicio de mapas para obtener todos los datos que necesitas para hacer tu propio widget ToC. Tal vez esto te ayude a solucionar problemas con otros widgets ToC. Es un buen ejercicio para aprender a mostrar datos en el DOM y a veces, solo necesitas un ToC... tal vez.

El código fuente completo de este ejemplo se puede encontrar aquí.

Asegúrate de visitar mi blog para más consejos y trucos geodev!

ChrisSergent

Checking out your post; your blog link points to github. Still reading and checking out the source.