Jak vytvořit ToC

ReneRubalcava

<\/HEAD>

<\/P>

Dobře, povídejme si o ToC<\/EM>.<\/P>Přidání widgetu Table of Contents\/Legend do webových map ArcGIS je jednou z těch věcí, které bohužel jsou nutným zlem. Opravdu si myslím, že byste měli usilovat o navržení své mapy a aplikace tak, aby ToC nebylo potřeba. Ale někdy, v těch nejhorších chvílích<\/EM>, musíte udělat to, co musíte udělat.<\/P><\/P>Jsem v tom vinný<\/A>. Vím, že uživatelé to mohou chtít a vývojáři se s tím musí vypořádat. Dokonce jsem přidal příklad v kapitole<\/A> do mé knihy ArcGIS WebDev<\/A>.<\/P>

<\/P>

V diskuzním fóru se o tom vždy zdá být spousta otázek. Tento

ToC Widget<\/A> od nilu se zdá být docela populární. Je to šikovný widget, spousta funkcí, obecně dobré věci.<\/P>

<\/P>

Naučte se chodit s ToC<\/H2>Ale vy jako vývojář byste měli mít představu o jak je widget ToC postavený<\/EM>. Vysvětluji koncepty v výše uvedené propojené ukázkové kapitole<\/A> z mé knihy<\/A>. Ale zde jsou základní kroky.<\/P>

<\/P>

• Požádejte o data na

legend endpointu<\/A> MapService.<\/LI>Rozparsujte odpověď legendy do hezkého seznamu<\/EM> vrstev<\/LI>Nastavte click eventy pro zapnutí/vypnutí vrstev<\/LI>Bonus<\/STRONG> - Nastavte click eventy pro zapnutí/vypnutí podvrstev<\/EM><\/LI>Zatančete radostný tanec!<\/LI><\/UL><\/P><\/P>Tolik k tomu. Jednoduché, že?<\/EM><\/P>Pravděpodobně existuje tucet různých způsobů, jak toho dosáhnout. Můžete použít dijit/Menu<\/A>, můžete použít dijit/Tree<\/A>, nebo můžete použít běžné DOM elementy, vyberte si.<\/P>

<\/P>

Zde je nějaký kód, který přesně toto dělá.<\/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      \/6 map over the layer ids and pull \u00016 \/6 the layers designated as part of legend \u00016 \/6 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      \/6 map over those layers and create some DOM element containers \u00016 \/6 this.tocLayers.map(function(x) {\n &nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.var visible = x.visible ? 'glyphicon-ok' : 'glyphicon-ban-circle'; \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.var panel = put(this.tocInfo,'div.panel.panel-default'); \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.var pheading = put(panel,'div.panel-heading'); \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.var ptitle = put(pheading,'h4.panel-title'); \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.put( \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.ptitle, \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.'span.glyphicon.' + visible + \ n & nbsp.& nbsp.& nbsp.& nbsp.& nbsp.'& #46 ;layer-item[data-layer-id=' + x.id + ']') ; \ n & nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .var node = \ n & nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp .& nb sp.put(ptitle,'span',{ innerHTML: sub(x , layertitle) }); \ n & nb sp .& nb sp .& nb sp .& nb sp .& nb sp.this._getDetails(x,node,panel); \ n & nb sp .& nb sp .& nb sp .& nb sp;}\.bind(this)); \ n & nb sp .& nb sp .& nb sp .& nb sp. \/6 this will handle turning the whole service on/off \u00016 \/6 var layerHandle = on(this.tocInfo,'.layer-item:click',function(e){ \ n & nb sp .& nb sp .& nb sp .& nb sp.e.preventDefault(); \ n & nb sp .& nb sp .& nb sp .& nb sp.e.stopPropagation(); \ n & nb sp .& nb sp .& nb sp .& nb sp.domClass.toggle(e.target,'glyphicon-ok glyphicon-ban-circle'); \ n & nb sp .& nb sp .& nb sp .& nb sp.var id = domAttr.get(e.target,'data-layer-id'); \ n & nb sp .& nb sp .& nb sp .& nb sp.var lyr = map.getLayer(id); \ n & nb sp .& nb sp .& nb sp .& nb.sp.lyr.setVisibility(!lyr.visible); \ n &nb.sp.;}); \ n &nb.sp.; \/6 this will turn individual layers on/off \u00016 \/6 var itemHandle = on(this.tocInfo,'.sublayer-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 subid = parseInt(domAttr.get(e.target,'data-sublayer-id')); \ n &nb.sp.;var lyr = map.getLayer(id); \ n &nb.sp.;var lyrs = lyr.visibleLayers ; \ n &nb.sp.;var visibleLayers = []; \ n &nb.sp.; \/6 this bit will adjust the visible layers based on what was clicked \u00016 \/6 if (lyrs.indexOf(subid) > -1) { \ n &nb.sp.;visibleLayers = lyrs.filter(function(x){return x !== subid ;});} else {visibleLayers = lyrs.concat([subid]);}lyr.setVisibleLayers(visibleLayers);});this.own(layerHandle,itemHandle);}, \/6 do a quick check that a URL has been provided \/6 _getDetails: function(layer,node,panel){if (!layer.url){return;}var pbody=put(panel,'div.panel-body');this._getLegend(layer,pbody);}, \/6 here is the workhorse \/6 _getLegend: function(layer,pbody){var url=layer.url+'\\/legend';var id=layer.id;6 this is a just a wrapper module I use for
        6 esri/request. see source at <//SPAN>

https:\/ \/github.com \/odoe \/esri-layertoc-sample <//A>
6 getLayers(url).then(function(layers) {
       var tbl = put(pbody, 'table.table');
       // procházet vrstvy a
       // přidat položky do tabulky
       layers.map(function(a) {
           var lbl = labelName(a);
           var layerId;
           var hasLayerId = false;
           if (a.hasOwnProperty('layerId')) {
               hasLayerId = true;
               layerId = a.layerId;
           }
           // procházet legendu a přidat položky
           // do řádku tabulky
           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)
               });
               // Přidávám pouze base64 obrázek, ale můžete také
               // použít URL na obrázek poskytnutý v Legend endpointu
               put(td1, 'img', {
                   src: 'data:image/png;base64,' + b.imageData
               });
           });
       });
    }, function(err) { console.debug('chyba v požadavku', err); });
    }
});
});

Wow, to je hodně kódu. Hej, chtěl jsi se naučit o ToC widgetu, to zabere trochu kódu. Přidal jsem tam pár komentářů, aby ti to pomohlo. Možná bys mohl některé funkce rozdělit do menších modulů, ale to nechám na tobě.

Používám

put-selector v tomto příkladu pro vytváření DOM elementů (je součástí ArcGIS JS API), protože mi přijde smysluplnější při skládání DOM. Také používám Bootstrap, aby to vypadalo hezky, což je zdroj některých názvů CSS tříd.Když je vše hotovo, tento příklad bude vypadat nějak takto.Docela šik

Co to dělá, je vypínání jednotlivých služeb a jednotlivých vrstev ve visibleLayers. Tento příklad je nastaven pouze pro ArcGISDynamicMapServiceLayer, ale můžeš ho upravit pro FeatureLayers a pokud jsi odvážný, přidat podporu pro vlastní renderery. Snažím se tomu vyhýbat, protože vždy něco pokazím, ale jde to. Hodně štěstí. Pamatuji si, že to bylo mnohem těžší dávno předtím, když jsem to dělal ve Flexu, protože REST API tehdy nemělo Legend endpoint, takže toto je vlastně jednodušší než tehdy.

Chtěl jsem ti jen dát slušný přehled o tom, jak můžeš přistupovat k legend endpointu mapové služby a získat všechna data potřebná k vytvoření vlastního ToC widgetu. Možná ti to pomůže vyřešit problémy s jinými ToC widgety. Je to dobré cvičení v zobrazování dat v DOM a někdy prostě potřebuješ ToC... možná.

Celý zdrojový kód tohoto příkladu najdeš zde.

Určitě mrkni na můj blog pro další tipy a triky z geodev světa!

ChrisSergent

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