Wie man ein ToC erstellt

ReneRubalcava

<\/HEAD>

<\/P>

Ok, sprechen wir über das ToC<\/EM>.<\/P>Das Hinzufügen eines Table of Contents\/Legend Widgets zu ArcGIS-Webkarten ist leider eine notwendige Übelkeit. Ich denke wirklich, man sollte versuchen, seine Karte und Anwendung so zu gestalten, dass ein ToC nicht benötigt wird. Aber manchmal, in den schlimmsten Zeiten<\/EM>, muss man tun, was man tun muss.<\/P><\/P>Ich bin schuldig daran<\/A>. Mir ist bewusst, dass Benutzer es wollen könnten und Entwickler sich damit auseinandersetzen müssen. Ich habe sogar ein Beispiel in einem Kapitel<\/A> zu meinem ArcGIS WebDev Buch<\/A> hinzugefügt.<\/P>

<\/P>

Im Forum tauchen immer wieder Fragen dazu auf. Dieses

ToC Widget<\/A> von nilu scheint ziemlich beliebt zu sein. Es ist ein tolles Widget, mit vielen Funktionen, generell gute Sachen.<\/P>

<\/P>

Lerne, mit dem ToC umzugehen<\/H2>Aber du als Entwickler solltest eine Vorstellung davon haben, wie ein ToC Widget aufgebaut ist<\/EM>. Ich erkläre die Konzepte im oben verlinkten Beispielkapitel<\/A> aus meinem Buch<\/A>. Aber hier sind die grundlegenden Schritte.<\/P>

<\/P>

• Mache eine Anfrage an den

Legend-Endpunkt<\/A> des MapService.<\/LI>Parsiere die Legend-Antwort in eine hübsch aussehende<\/EM> Liste der Layer.<\/LI>Verknüpfe Klick-Ereignisse, um Layer an- und auszuschalten.<\/LI>Bonus<\/STRONG> - Verknüpfe Klick-Ereignisse für Sub-Layer an- und auszuschalten.<\/EM><\/LI>Mache den Freudentanz!<\/LI><\/UL><\/P><\/P>Das ist alles. Einfach, oder?<\/EM><\/P>Es gibt wahrscheinlich ein Dutzend verschiedene Wege, dies zu erreichen. Du könntest das dijit/Menu<\/A> verwenden, du könntest einen dijit/Tree<\/A> nutzen, du könntest einfach reguläre DOM-Elemente verwenden, such dir was aus.<\/P>

<\/P>

Hier ist etwas Code, der genau das macht.<\/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      // map über die Layer-IDs und hole \n      // die als Teil der Legende ausgewiesenen Layer \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.& nbsp;.map(function(a) { return a }); \ n & nbsp;. & nbsp;// map über diese Layer und erstelle einige DOM-Elementcontainer \ n & nbsp;. & nbsp;. tocLayers.map(function(x) { \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle'; \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. var panel = put(this.tocInfo , 'div.panel.panel-default'); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. var pheading = put(panel , 'div.panel-heading'); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. var ptitle = put(pheading , 'h4.panel-title'); \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. put( \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. ptitle , \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. 'span.glyphicon.' + visible + \ n & nbsp;. & nbsp;. & nbsp;. & nbsp;. & nbsp;. '.layer-item[data-layer-id=' + x.id + ']') ; \ n & nbsp;. & nbsp;. & nbsp;. & nb sp ; \ n & nb sp ;.  & nb sp ;.  & nb sp ;.  & nb sp ;.  var node = \ n         put(ptitle , \ n         'span' , \ n         { innerHTML: sub(x , layertitle) } \ n         ); \ n         this._getDetails(x , node , panel); \ n     }.bind(this)); \ n     // dies wird das gesamte Service an-/ausschalten behandeln \ n     var layerHandle = on(this.tocInfo , '.layer-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 lyr = map.getLayer(id); \ n         lyr.setVisibility(!lyr.visible); \ n     }); \ n     // dies wird einzelne Layer an-/ausschalten \ 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         // dieser Teil passt die sichtbaren Layer basierend auf dem Klick an \ n         if (lyrs.indexOf(subid) > -1) { \ n             visibleLayers = lyrs.filter(function(x) { \ n                 return x !== subid ; \ n             }); \ n         } else { \ n             visibleLayers = lyrs.concat([subid]); \ n         } \ n         lyr.setVisibleLayers(visibleLayers); \ n     }); \ n     this.own(layerHandle , itemHandle); \ n }, \ n // mache eine schnelle Überprüfung ob eine URL bereitgestellt wurde \ n _getDetails: function(layer , node , panel) { \ n      if (!layer.url) { return ; }  
    var pbody = put(panel , 'div.panel-body'); 
    this._getLegend(layer , pbody); 
 }, 
 // hier ist der Arbeitstier 
 _getLegend: function(layer , pbody) { 
    var url = layer.url + '\/legend'; 
    var id = layer.id ; 
    // dies ist nur ein Wrapper-Modul das ich für 
     // esri/request verwende. Quelle siehe unter 

https:\/ \/github.com \/odoe \/esri-layertoc-sample< /a>
    getLayers(url).then(function(layers) {
       var tbl = put(pbody, 'table.table');
       // über die Ebenen iterieren und
       // Elemente zur Tabelle hinzufügen
       layers.map(function(a) {
           var lbl = labelName(a);
           var layerId;
           var hasLayerId = false;
           if (a.hasOwnProperty('layerId')) {
               hasLayerId = true;
               layerId = a.layerId;
           }
           // über die Legende iterieren und Elemente
           // zur Tabellenzeile hinzufügen
           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)
               });
               // Ich füge nur das base64-Bild hinzu, aber du könntest auch
               // die URL zum Bild verwenden, die im Legend-Endpunkt bereitgestellt wird
               put(td1, 'img', {
                   src: 'data:image/png;base64,' + b.imageData
               });
           });
       });
    }, function(err) { console.debug('Fehler bei der Anfrage', err); });
    }
});
});

Wow, das ist eine Menge Code. Hey, du wolltest etwas über ein ToC-Widget lernen, das erfordert etwas Code. Ich habe einige Kommentare eingefügt, um dir zu helfen. Du könntest einige Funktionen in kleinere Module aufteilen, aber das überlasse ich dir.

Ich verwende in diesem Beispiel den

put-selector, um DOM-Elemente zu erstellen (es ist in der ArcGIS JS API enthalten), weil ich festgestellt habe, dass es für mich beim Erstellen von DOM-Strukturen sinnvoller ist. Außerdem nutze ich Bootstrap, damit es gut aussieht; dort sind einige der CSS-Klassennamen definiert.Wenn alles fertig ist, sieht dieses Beispiel ungefähr so aus.Ziemlich schick

Was das bewirkt, ist das Ein- und Ausschalten einzelner Dienste und der einzelnen Ebenen in visibleLayers. Dieses Beispiel ist nur für einen ArcGISDynamicMapServiceLayer eingerichtet, aber du könntest es für FeatureLayers anpassen und wenn du mutig bist, Unterstützung für benutzerdefinierte Renderer hinzufügen. Ich versuche das zu vermeiden, weil ich immer etwas durcheinanderbringe, aber es ist möglich. Viel Glück. Ich erinnere mich, dass das vor langer Zeit in Flex viel schwieriger war, da die REST API damals keinen Legend-Endpunkt hatte; daher ist das heute tatsächlich einfacher.

Ich wollte dir einfach einen guten Überblick geben, wie du auf den Legend-Endpunkt eines Map Service zugreifen kannst, um alle Daten zu erhalten, die du für dein eigenes ToC-Widget brauchst. Vielleicht hilft dir das bei der Fehlersuche mit anderen ToC-Widgets. Es ist eine gute Übung, um zu lernen, wie man Daten im DOM anzeigt und manchmal braucht man eben einfach ein ToC... vielleicht.

Den vollständigen Quellcode für dieses Beispiel findest du hier.

Schau auch unbedingt auf meinem Blog vorbei für weitere Tipps und Tricks rund um Geodev!

ChrisSergent

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