Hoe maak je een inhoudsopgave

ReneRubalcava

<\/HEAD>

<\/P>

Ok, laten we het over de ToC hebben<\/EM>.<\/P>Het toevoegen van een Table of Contents\/Legend widget aan ArcGIS webkaarten is een van die dingen die helaas een noodzakelijk kwaad zijn. Ik denk echt dat je moet proberen je kaart en je applicatie zo te ontwerpen dat een ToC niet nodig is. Maar soms, in die ergste tijden<\/EM>, moet je doen wat je moet doen.<\/P><\/P>Ik ben er schuldig aan<\/A>. Ik ben me ervan bewust dat gebruikers het misschien willen en ontwikkelaars ermee moeten omgaan. Ik heb zelfs een voorbeeld in een hoofdstuk<\/A> toegevoegd aan mijn ArcGIS WebDev boek<\/A>.<\/P>

<\/P>

Vragen in het forum lijken er altijd over op te duiken. Deze

ToC Widget<\/A> van nilu lijkt behoorlijk populair te zijn. Het is een nette widget, vol functies, over het algemeen goede spullen.<\/P>

<\/P>

Leer lopen met de ToC<\/H2>Maar jij als ontwikkelaar zou een idee moeten hebben van hoe een ToC widget is opgebouwd<\/EM>. Ik leg de concepten uit in het hierboven gelinkte voorbeeldhoofdstuk<\/A> uit mijn boek<\/A>. Maar hier zijn de basisstappen.<\/P>

<\/P>

• Doe een verzoek naar het

legend endpoint<\/A> van de MapService.<\/LI>Parse de legend response in een mooi uitziende<\/EM> lijst van de lagen<\/LI>Koppel click events om lagen aan- en uit te zetten<\/LI>Bonus<\/STRONG> - Koppel click events om sublagen aan- en uit te zetten<\/EM><\/LI>Doe de happy dance!<\/LI><\/UL><\/P><\/P>Dat is alles wat erbij komt kijken. Eenvoudig toch?<\/EM><\/P>Er zijn waarschijnlijk wel een dozijn verschillende manieren waarop je dit kunt bereiken. Je zou de dijit/Menu<\/A> kunnen gebruiken, je zou een dijit/Tree<\/A> kunnen gebruiken, je zou gewoon reguliere DOM-elementen kunnen gebruiken, kies maar.<\/P>

<\/P>

Hier is wat code die precies dit doet.<\/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/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 'Layer Item';\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      \/20map over the layer ids and pull20 \/20the layers designated as part of legend20 \/20 \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 &nbsp.& nbsp;.map(function(a) { return a ; }); \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; \/20map over those layers and create some DOM element containers20 \/20 \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; this.tocLayers.map(function(x) { \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle'; \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var panel = put(this.tocInfo,'div.panel.panel-default'); \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var pheading = put(panel,'div.panel-heading'); \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; var ptitle = put(pheading,'h4.panel-title'); \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; put( \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ; ptitle , \ n & nbsp ; & nbsp ; & nbsp ; & nbsp ; & nbsp ;& nb sp  ' span.glyphicon.' + visible + \ n  & nb sp  ' .layer-item[data-layer-id=' + x.id + ']') \ n  & nb sp  ); \ n  & nb sp  var node = \ n  & nb sp  put(ptitle , \ n  & nb sp  ' span' , \ n  & nb sp  { innerHTML: sub(x , layertitle )} \ n  & nb sp  ); \ n  & nb sp  this._getDetails(x , node , panel ); \ n  & nb sp  }.bind(this)); \ n  & nb sp  \/20this will handle turning the whole service on2Foff20 \/20 \ n  & nb sp  var layerHandle = on(this.tocInfo , '.layer-item:click' , function(e) { \ n  & nb sp  e.preventDefault(); \ n  & nb sp  e.stopPropagation(); \ n  & nb sp  domClass.toggle(e.target , 'glyphicon-ok glyphicon-ban-circle'); \ n  & nb sp  var id = domAttr.get(e.target , 'data-layer-id'); \ n  & nb sp  var lyr = map.getLayer(id); \ n  & nb sp  lyr.setVisibility(!lyr.visible); \ n  & nb sp }); \ n   \/20this will turn individual layers on2Foff20 \/20 \ n   var itemHandle = on(this.tocInfo , '.sublayer-item:click' , function(e) { \ n   e.preventDefault(); \ n   e.stopPropagation(); \ n   domClass.toggle(e.target , 'glyphicon-ok glyphicon-ban-circle'); \ n   var id = domAttr.get(e.target , 'data-layer-id'); \ n   var subid = parseInt(domAttr.get(e.target , 'data-sublayer-id')); \ n   var lyr = map.getLayer(id); \ n   var lyrs = lyr.visibleLayers; \ n   var visibleLayers = []; \ n   \/20this bit will adjust the visible layers based on what was clicked20 \/20 \ n   if (lyrs.indexOf(subid) > -1) { \ n   visibleLayers = lyrs.filter(function(x) { return x !== subid }); } else { visibleLayers = lyrs.concat([subid]); } lyr.setVisibleLayers(visibleLayers); }); this.own(layerHandle,itemHandle); }, \/20do a quick check that a URL has been provided \/20 _getDetails:function(layer,node,panel){ if(!layer.url){return;} var pbody=put(panel,'div.panel-body'); this._getLegend(layer,pbody); }, \/20here is the workhorse \/20 _getLegend:function(layer,pbody){ var url=layer.url+'\\/legend'; var id=layer.id;2F2F this is a just a wrapper module I use for
                          2F2F esri\\request. zie bron op <\\SPAN>

https:\\\/\\\\github.com\\\\odoe\\\\esri-layertoc-sample<\\/A>
20getLayers(url).then(function(layers) {
       var tbl = put(pbody, 'table.table');
       // itereren over de lagen en
       // items toevoegen aan de tabel
       layers.map(function(a) {
           var lbl = labelName(a);
           var layerId;
           var hasLayerId = false;
           if (a.hasOwnProperty('layerId')) {
               hasLayerId = true;
               layerId = a.layerId;
           }
           // itereren over de legenda en items toevoegen
           // aan de tabel-rij
           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)
               });
               // Ik voeg alleen de base64-afbeelding toe, maar je zou ook
               // de URL naar de afbeelding kunnen gebruiken die wordt geleverd in Legend endpoint
               put(td1, 'img', {
                   src: 'data:image/png;base64,' + b.imageData
               });
           });
       });
    }, function(err) { console.debug('fout in verzoek', err); });
    }
});
});

Wauw, dat is veel code. Hé, je wilde iets leren over een ToC-widget, dat kost wat code. Ik heb er wat opmerkingen in gezet om je te helpen. Misschien kun je een deel van de functionaliteit opsplitsen in kleinere modules, maar dat laat ik aan jou over.

Ik gebruik in dit voorbeeld de

put-selector om DOM-elementen te maken (het is inbegrepen in de ArcGIS JS API) omdat ik het zelf logischer vind bij het samenstellen van DOM-creatie. Ik gebruik ook Bootstrap om het er mooi uit te laten zien, waar sommige css-klassen zijn gedefinieerd.Als alles klaar is, zal dit voorbeeld er ongeveer zo uitzien.Best fraai

Wat dit doet is individuele services en individuele lagen in visibleLayers uitschakelen. Dit voorbeeld is alleen opgezet voor een ArcGISDynamicMapServiceLayer, maar je kunt het aanpassen voor FeatureLayers en als je durft ondersteuning toevoegen voor custom renderers. Ik probeer dit te vermijden waar mogelijk omdat ik altijd wel iets verpest, maar het kan gedaan worden. Succes. Ik herinner me dat dit vroeger veel moeilijker was toen ik dit in Flex deed, omdat ik denk dat de REST API toen geen Legend endpoint had, dus dit is eigenlijk makkelijker dan het toen geweest zou zijn.

Ik wilde je gewoon een goed overzicht geven van hoe je toegang kunt krijgen tot het legend endpoint van een map service om alle data te halen die je nodig hebt om je eigen ToC-widget te maken. Misschien helpt dit je problemen op te lossen met andere ToC-widgets. Het is een goede oefening om te leren data weer te geven in de DOM en soms heb je gewoon een ToC nodig... misschien.

De volledige broncode voor dit voorbeeld is hier te vinden.

Zorg ervoor dat je ook mijn blog bekijkt voor meer geodev tips en trucs!

ChrisSergent

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