Como fazer um ToC

ReneRubalcava

<\/HEAD>

<\/P>

Ok, vamos falar sobre o ToC<\/EM>.<\/P>Adicionar um widget de Tabela de Conteúdos\/Legenda aos mapas web do ArcGIS é uma daquelas coisas que infelizmente é um mal necessário. Eu realmente acho que você deve se esforçar para projetar seu mapa e sua aplicação de tal forma que um ToC não seja necessário. Mas às vezes, naqueles piores momentos<\/EM>, você tem que fazer o que tem que fazer.<\/P><\/P>Eu sou culpado disso<\/A>. Estou ciente de que os usuários podem querer isso e os desenvolvedores têm que lidar com isso. Eu até adicionei um exemplo em um capítulo<\/A> no meu livro ArcGIS WebDev<\/A>.<\/P>

<\/P>

Perguntas no fórum sempre parecem surgir sobre isso. Este

Widget ToC<\/A> do nilu parece ser bem popular. É um widget legal, cheio de recursos, geralmente coisa boa.<\/P>

<\/P>

Aprenda a caminhar com o ToC<\/H2>Mas você como desenvolvedor deve ter uma ideia de como um widget ToC é construído<\/EM>. Eu explico os conceitos no capítulo de exemplo<\/A> acima vinculado do meu livro<\/A>. Mas aqui estão os passos básicos.<\/P>

<\/P>

• Faça uma requisição ao

endpoint da legenda<\/A> do MapService.<\/LI>Analise a resposta da legenda em uma lista bem bonita<\/EM> das camadas<\/LI>Ligue eventos de clique para ligar/desligar as camadas<\/LI>Bônus<\/STRONG> - Ligue eventos de clique para ligar/desligar subcamadas<\/EM><\/LI>Dança da felicidade!<\/LI><\/UL><\/P><\/P>É só isso. Simples, certo?<\/EM><\/P>Provavelmente existem uma dúzia de maneiras diferentes que você poderia realizar isso. Você poderia usar o dijit/Menu<\/A>, você poderia usar um dijit/Tree<\/A>, você poderia simplesmente usar elementos DOM regulares, escolha o que preferir.<\/P>

<\/P>

Aqui está algum código que faz exatamente isso.<\/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\/_base\lang',\n  '.\/_layerservice',\n  'dojox\/_base/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 'Item da Camada';\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      \/20mapear20os20ids20das20camadas20e20extrair20as20camadas20designadas20como20parte20da20legenda20
      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      }).filter(function(a) { return a; });\n &nbsp.& nbsp;20mapear20essas20camadas20e20criar20alguns20contêineres20de20elementos20DOM
 & nbsp;20this.tocLayers.map(function(x) {5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;5Cn & nbsp;var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle';
 & nbsp;var panel = put(this.tocInfo, 'div.panel.panel-default');
 & nbsp;var pheading = put(panel, 'div.panel-heading');
 & nbsp;var ptitle = put(pheading, 'h4.panel-title');
 & nbsp;put(
 & nbsp;ptitle,
 & nbsp;'span.glyphicon.' + visible +
 & nbsp;'.layer-item[data-layer-id=' + x.id + ']'
 & nbsp;);
 & nbsp;var node =
 & nbsp;put(ptitle,
 & nbsp;'span',
 & nbsp;{ innerHTML: sub(x, layertitle) }
 & nbsp;);
 & nbsp;this._getDetails(x, node, panel);
 }).bind(this));
 																			// isso vai lidar com ligar/desligar todo o serviço
 											var layerHandle = on(this.tocInfo, '.layer-item:click', function(e) {	
 										e.preventDefault();	
 										e.stopPropagation();	
 										domClass.toggle(e.target, 'glyphicon-ok glyphicon-ban-circle');	
 										var id = domAttr.get(e.target, 'data-layer-id');	
 										var lyr = map.getLayer(id);	
 								        lyr.setVisibility(!lyr.visible);	
 	                                             });	
 	                                             // isso vai ligar/desligar camadas individuais
 	                                             var itemHandle = on(this.tocInfo, '.sublayer-item:click', function(e) {	
 	                                              e.preventDefault();	
 	                                              e.stopPropagation();	
 	                                              domClass.toggle(e.target, 'glyphicon-ok glyphicon-ban-circle');	
 	                                              var id = domAttr.get(e.target, 'data-layer-id');	
 	                                              var subid = parseInt(domAttr.get(e.target, 'data-sublayer-id'));	
 	                                              var lyr = map.getLayer(id);	
 	                                              var lyrs = lyr.visibleLayers;	
 	                                              var visibleLayers = [];	
 	                                               // esta parte ajustará as camadas visíveis com base no que foi clicado
 	                                             if (lyrs.indexOf(subid) > -1) {	
 	                                            visibleLayers = lyrs.filter(function(x) {	
 	                                return x !== subid;	
 	                                  });	
 	                            } else {	
 	                            visibleLayers = lyrs.concat([subid]);	
 	                      }	
 	                      lyr.setVisibleLayers(visibleLayers);	
 	                });	
 	          this.own(layerHandle, itemHandle);	
 },
 // faça uma verificação rápida se uma URL foi fornecida
 _getDetails: function(layer, node, panel) {
 if (!layer.url) { return; }
 var pbody = put(panel, 'div.panel-body');
 this._getLegend(layer, pbody);
 },
 // aqui está o motor principal
 _getLegend: function(layer, pbody) {
 var url = layer.url + '\/legend';
 var id = layer.id;
 // este é apenas um módulo wrapper que uso para
     // esri/request. veja a fonte em <//span><a class=\\"jive-link-external-small\\" href=\\"https:\\\/\\\\/github.com\\\\/odoe\\\\/esri-layertoc-sample\\" rel=\\"nofollow noopener noreferrer\\" target=\\"_blank\\">https:\\\/\\\\/github.com\\\\/odoe\\\\/esri-layertoc-sample<\\/a>", getLayers(url).then(function(layers)  {
        var tbl = put(pbody, 'table.table');
        // iterar sobre as camadas e
        // adicionar itens à tabela
        layers.map(function(a) {
          var lbl = labelName(a);
          var layerId;
          var hasLayerId = false;
          if (a.hasOwnProperty('layerId')) {
            hasLayerId = true;
            layerId = a.layerId;
          }
          // iterar sobre a legenda e adicionar itens
       " "// à linha da tabela
 													 a.legend.map(function(b) {
 													 	var tr = put(tbl, 'tr');
 													 	if (hasLayerId) {
 												 	 	 hasLayerId = false;
 										 	 	 	var lyrCheck = put(
 	 	 	 	 	 	 	 	 	 	 	 'span.glyphicon.glyphicon-ok' +
 	 	 	 	 	 	 	 	 	 	 	 '.sublayer-item[data-layer-id=' + id + ']' +
 	 	 	 	 	 	 	 	 	 	 	 '.[data-sublayer-id=' + layerId + ']'
 	 	 	 	 	 	 	);  
 	  put(tr, 'td', lyrCheck);
 	  } else {
 	  put(tr, 'td');
 	  }
 	  var td1 = put(tr, 'td.layer-image');
 	  put(tr, 'td', {
 	  innerHTML: lbl(b)
 	  });
 	  // Eu apenas adiciono a imagem base64, mas você também poderia
 	  // usar a URL da imagem fornecida no endpoint Legend
 	  put(td1, 'img', {
 	  src: 'data:image/png;base64,' + b.imageData
 	  });
 	  });
 	  });
 } , function(err) { console.debug('erro na requisição', err); });
};
});
});

Uau, isso é muito código. Ei, você queria aprender sobre um widget ToC, isso vai exigir um pouco de código. Eu adicionei alguns comentários para ajudar você. Talvez você consiga dividir algumas funcionalidades em módulos menores, mas deixo isso para você.<\/P>

Estou usando o

put-selector neste exemplo para criar elementos DOM (ele está incluído na ArcGIS JS API) porque achei que faz mais sentido para mim ao compor a criação do DOM. Também estou usando o Bootstrap para deixar a aparência agradável, que é onde algumas das classes CSS são definidas.<\/P>Quando tudo estiver pronto, este exemplo ficará parecido com isto.<\/P><\/P>Bem elegante<\/H2>O que isso faz é desligar serviços individuais e as camadas individuais em visibleLayers. Este exemplo está configurado apenas para um ArcGISDynamicMapServiceLayer, mas você poderia ajustá-lo para FeatureLayers e se for corajoso adicionar suporte para renderizadores personalizados. Tento evitar isso quando posso porque sempre acabo cometendo algum erro, mas pode ser feito. Boa sorte. Lembro que isso era muito mais difícil há muito tempo quando fiz isso em Flex, pois acho que a REST API não tinha um endpoint Legend naquela época, então isso é realmente mais fácil do que teria sido.<\/P>Eu só queria dar uma boa visão geral de como acessar o endpoint legend de um serviço de mapa para obter todos os dados necessários para criar seu próprio widget ToC. Talvez isso ajude você a resolver problemas com outros widgets ToC. É um bom exercício para aprender a exibir dados no DOM e às vezes, você pode simplesmente precisar de um ToC... talvez.<\/P>O código-fonte completo deste exemplo pode ser encontrado aqui.<\/P>Não deixe de conferir meu blog para mais dicas e truques geodev!<\/P><\/BODY><\/HTML>

ChrisSergent

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