Comment créer une ToC

ReneRubalcava

<\/HEAD>

<\/P>

D'accord, parlons du ToC<\/EM>.<\/P>Ajouter un widget Table des matières\/Légende aux cartes web ArcGIS est l'une de ces choses qui, malheureusement, est un mal nécessaire. Je pense vraiment que vous devriez vous efforcer de concevoir votre carte et votre application de manière à ce qu'un ToC ne soit pas nécessaire. Mais parfois, dans ces pires moments<\/EM>, vous devez faire ce que vous devez faire.<\/P><\/P>J'en suis coupable<\/A>. Je suis conscient que les utilisateurs peuvent le vouloir et que les développeurs doivent y faire face. J'ai même ajouté un exemple dans un chapitre<\/A> de mon livre ArcGIS WebDev<\/A>.<\/P>

<\/P>

Des questions sur le forum semblent toujours surgir à ce sujet. Ce

ToC Widget<\/A> de nilu semble être assez populaire. C'est un widget sympa, plein de fonctionnalités, généralement de bonnes choses.<\/P>

<\/P>

Apprenez à marcher avec le ToC<\/H2>Mais vous, en tant que développeur, devriez avoir une idée de comment un widget ToC est construit<\/EM>. J'explique les concepts dans le chapitre d'exemple lié ci-dessus extrait du chapitre<\/A> de mon livre<\/A>. Mais voici les étapes de base.<\/P>

<\/P>

• Faire une requête au

point de terminaison legend<\/A> du MapService.<\/LI>Analyser la réponse legend en une liste super jolie<\/EM> des couches<\/LI>Connecter des événements click pour activer/désactiver les couches<\/LI>Bonus<\/STRONG> - Connecter des événements click pour activer/désactiver les sous-couches<\/EM><\/LI>Faites la danse de la joie !<\/LI><\/UL><\/P><\/P>C'est tout ce qu'il y a à faire. C'est simple, non ?<\/EM><\/P>Il y a probablement une douzaine de façons différentes d'accomplir cela. Vous pourriez utiliser le dijit/Menu<\/A>, vous pourriez utiliser un dijit/Tree<\/A>, vous pourriez simplement utiliser des éléments DOM réguliers, faites votre choix.<\/P>

<\/P>

Voici un peu de code qui fait exactement cela.<\/P>

define([\n  'dojo\/_base\/_declare',\n  'dojo\/_Deferred',\n  'dojo\/_on',\n  'dojo\/_topic',\n  'dojo\/_query',\n  'dojo\/_dom',\n  'dojo\/_dom-attr',\n  'put-selector',\n  'dojo\/_dom-class',\n  'dojo\/_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 'Élément de couche';\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 \/ this.tocLayers = map.layerIds.map(function(x) { \u00a0 \u00a0 \u00a0 if (layerIds.indexOf(x) > -1) { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return map.getLayer(x); \u00a0 \u00a0 \u00a0 } else { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return false; \u00a0 \u00a0 \u00a0 } }); filter(function(a) { return a ; }); \u00a0 \u00a0 \/ map over those layers and create some DOM element containers \u00a0 this.tocLayers.map(function(x) { \u00a0 \u00a0 \u00a0 var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle'; \u00a0 \u00a0 \u00a0 var panel = put(this.tocInfo , 'div.panel.panel-default'); \u00a0 \u00a0 \u00a0 var pheading = put(panel , 'div.panel-heading'); \u00a0 \u00a0 \u00a0 var ptitle = put(pheading , 'h4.panel-title'); \u00a0 \u00a0 \u00a0 put( ptitle , 'span.glyphicon.' + visible + '.layer-item[data-layer-id=' + x.id + ']'); var node = put(ptitle , 'span' , { innerHTML: sub(x , layertitle) }); this._getDetails(x , node , panel); }.bind(this)); \/ this will handle turning the whole service on/off \/ 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); }); \/ this will turn individual layers on/off \/ 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 = []; \/ this bit will adjust the visible layers based on what was clicked \/ 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); }, \/ do a quick check that a URL has been provided \/ _getDetails: function(layer , node , panel) { if (!layer.url) { return ; } var pbody = put(panel , 'div.panel-body'); this._getLegend(layer , pbody); }, \/ here is the workhorse \/ _getLegend: function(layer , pbody) { var url = layer.url + '\/legend'; var id = layer.id ; \/ this is a just a wrapper module I use for
      esri/request. voir la source sur <\/SPAN>

https:\/\\/github.com\\/odoe\\/esri-layertoc-sample<\\/A> {
        var tbl = put(pbody, 'table.table');
        // itérer sur les couches et
        // ajouter des éléments au tableau
        layers.map(function(a) {
          var lbl = labelName(a);
          var layerId;
          var hasLayerId = false;
          if (a.hasOwnProperty('layerId')) {
            hasLayerId = true;
            layerId = a.layerId;
          }
          // itérer sur la légende et ajouter des éléments
       &nbs p; // à la ligne du tableau
 
a.legend.map(function(b) {
 
var tr = put(tbl, 'tr');
 
if (hasLayerId) {
 
&nbs p; hasLayerId = false;
 
&nbs p; var lyrCheck = put(
 
&nbs p; 'span.glyphicon.glyphicon-ok' +
 
&nbs p; '.sublayer-item[data-layer-id=' + id + ']' +
 
&nbs p; '.[data-sublayer-id=' + layerId + ']'
 
&nbs p; );
 
&nbs p; put(tr, 'td', lyrCheck);
 
} else {
 
&nbs p; put(tr, 'td');
 
}
 
var td1 = put(tr, 'td.layer-image');
 
put(tr, 'td', {
 
innerHTML: lbl(b)
 
});
 
// J'ajoute juste l'image base64, mais vous pourriez aussi
 
// utiliser l'URL de l'image fournie dans le point de terminaison Legend
 
put(td1, 'img', {
 
src: 'data:image/png;base64,' + b.imageData
 
});
 
});
 
});
 
}, function(err) { console.debug('erreur dans la requête', err); });
 
}
&nbs p; });
});

Wow, c'est beaucoup de code. Hé, tu voulais apprendre à propos d'un widget ToC, ça va demander un peu de code. J'ai ajouté quelques commentaires pour t'aider. Tu pourrais peut-être découper certaines fonctionnalités en modules plus petits, mais je te laisse décider.< /P>

J'utilise le

put-selector dans cet exemple pour créer des éléments DOM (il est inclus dans l'ArcGIS JS API) simplement parce que j'ai trouvé que cela a plus de sens pour moi lors de la composition de la création DOM. J'utilise aussi Bootstrap pour que ce soit joli, c'est là où certaines classes CSS sont définies.< /P>Quand tout sera terminé, cet exemple ressemblera à ceci.< /P>Assez élégant

Ce que cela fait est d'éteindre les services individuels et les couches individuelles dans visibleLayers. Cet exemple est seulement configuré pour un ArcGISDynamicMapServiceLayer, mais vous pourriez l'adapter pour FeatureLayers et si vous êtes audacieux ajouter le support pour des renderers personnalisés. J'essaie d'éviter cela quand je peux car j'ai toujours tendance à faire une erreur, mais c'est faisable. Bonne chance. Je me souviens que c'était beaucoup plus difficile il y a longtemps quand je faisais ça en Flex, car je ne pense pas que l'API REST avait un point de terminaison Legend à l'époque, donc c'est en fait plus facile maintenant.< /P>

Je voulais juste vous donner un aperçu décent de comment accéder au point de terminaison legend d'un service de carte pour récupérer toutes les données nécessaires afin de créer votre propre widget ToC. Peut-être que cela vous aidera à résoudre des problèmes avec d'autres widgets ToC. C'est un bon exercice pour apprendre à afficher des données dans le DOM et parfois, vous avez juste besoin d'un ToC... peut-être.< /P>

Le code source complet de cet exemple se trouve ici.< /P>

N'oubliez pas de consulter mon blog pour plus d'astuces et conseils geodev !< /P>

ChrisSergent

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