目次の作り方

ReneRubalcava

<\/HEAD>

<\/P>

さて、ToCについて話しましょう<\/EM>。<\/P>ArcGISのウェブマップにTable of Contents\/Legendウィジェットを追加することは、残念ながら必要悪の一つです。私は本当に、ToCが不要になるようにマップとアプリケーションを設計することを目指すべきだと思います。しかし時には、最悪の時には<\/EM>、やらなければならないことをやるしかありません。<\/P><\/P>私もそれをやってしまいました<\/A>。ユーザーがそれを望むかもしれないこと、開発者がそれに対処しなければならないことは承知しています。私は自分のArcGIS WebDev本の章に例も追加しました<\/A>。<\/P>

<\/P>

フォーラムではいつもこの件に関する質問が出てきます。この

niluのToC Widget<\/A>はかなり人気があるようです。素敵なウィジェットで、多くの機能があり、全般的に良いものです。<\/P>

<\/P>

ToCの歩き方を学ぶ<\/H2>しかし開発者としては、ToCウィジェットがどのように構築されているか<\/EM>を理解しておくべきです。上記リンクのサンプル章<\/A>でその概念を説明していますが、ここに基本的なステップを示します。<\/P>

<\/P>

• MapServiceの

legendエンドポイント<\/A>にリクエストを送る。<\/LI>legendレスポンスをレイヤーの見栄えの良いリスト<\/EM>に解析する。<\/LI>クリックイベントを接続してレイヤーのオンオフを切り替える。<\/LI>ボーナス<\/STRONG> - サブレイヤーのオンオフもクリックイベントで制御する。<\/EM><\/LI>ハッピーダンスを踊る！<\/LI><\/UL><\/P><\/P>以上です。簡単ですよね？<\/EM><\/P>これを実現する方法はおそらく十数通りあります。dijit/Menu<\/A>を使うこともできますし、dijit/Tree<\/A>でもいいですし、普通のDOM要素だけでも構いません。お好きな方法を選んでください。<\/P>

<\/P>

以下はまさにこれを行うコードです。<\/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/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      // レイヤーIDをマップして、凡例の一部として指定されたレイヤーを取得する。\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      }).filter(function(a) { return a; });\n      // それらのレイヤーをマップしてDOM要素コンテナを作成する。\n&nbsp.& nbsp.& nbsp.& nbsp.this.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.& nbsp.var node = \ n & nbsp.& nbsp.& nbsp.& nbsp.put(ptitle, \ n & nbsp.& nbsp.& nbsp.& nbsp.'span', \ n & nbsp.& nbsp.& nbsp.& nbsp.{ innerHTML: sub(x, layertitle) } \ n & nbsp.& nbsp.& nbsp.& nb sp.); \ n & nb sp.;& nb sp;. _getDetails(x , node , panel ); \ n & nb sp.;}. bind(this)); \ n & nb sp.;// これはサービス全体のオンオフを処理します \ n & nb sp.;var layerHandle = on(this.tocInfo , '.layer-item:click' , function(e) { \ n & nb sp.;& nb sp;e.preventDefault(); \ n & nb sp.;& nb sp;e.stopPropagation(); \ n & nb sp.;& nb sp;.domClass.toggle(e.target , 'glyphicon-ok glyphicon-ban-circle'); \ n & nb sp.;& nb sp;.var id = domAttr.get(e.target , 'data-layer-id'); \ n & nb sp.;& nb sp;.var lyr = map.getLayer(id); \ n & nb sp.;& nb sp;.lyr.setVisibility(!lyr.visible); \ n & nb sp.;}); \ n & nb sp;// これは個々のレイヤーのオンオフを切り替えます \ n & nb sp;.var itemHandle = on(this.tocInfo , '.sublayer-item:click' , function(e) { \ n & nb sp.;& nb sp;e.preventDefault(); \ n & nb sp.;& nb sp;e.stopPropagation(); \ n & nb sp.;& nb sp;.domClass.toggle(e.target , 'glyphicon-ok glyphicon-ban-circle'); \ n & nb sp.;& nb sp;.var id = domAttr.get(e.target , 'data-layer-id'); \ n & nb sp.;& nb sp;.var subid = parseInt(domAttr.get(e.target , 'data-sublayer-id')); \ n & nb sp.;& nb sp;.var lyr = map.getLayer(id); \ n & nb sp.;& nb sp;.var lyrs = lyr.visibleLayers ; \ n & nb sp.;& nb sp;.var visibleLayers = []; \ n & nb sp;// この部分はクリックされた内容に基づいて表示レイヤーを調整します \ n & nb sp;if (lyrs.indexOf(subid) > -1) { \ n & nb sp;.visibleLayers = lyrs.filter(function(x) { return x !== subid ; }); \ n & nb sp;} else { \ n & nb sp;.visibleLayers = lyrs.concat([subid]); \ n & nb sp;} \ n & nb sp;.lyr.setVisibleLayers(visibleLayers); \ n & nb sp.}); \ n & nb sp;.this.own(layerHandle , itemHandle); \ n }, \ n // URLが提供されているか簡単にチェックします \ n _getDetails: function(layer , node , panel ) { \ n if (!layer.url) { return ; } \ n var pbody = put(panel , 'div.panel-body'); \ n this._getLegend(layer , pbody); \ n }, \ n // ここが主力です \ n _getLegend: function(layer , pbody ) { \ n var url = layer.url + '\/legend'; \ n var id = layer.id ; \ n // これは私が使っているesri/request用ラッパーモジュールです。ソースは      // esri/request. ソースはこちら <\/SPAN>

https:\/ \/github.com \/odoe \/esri-layertoc-sample < \/A >
getLayers(url).then(function(layers) {
       var tbl = put(pbody, 'table.table');
       // レイヤーを繰り返し処理し
       // テーブルにアイテムを追加する
       layers.map(function(a) {
           var lbl = labelName(a);
           var layerId;
           var hasLayerId = false;
           if (a.hasOwnProperty('layerId')) {
               hasLayerId = true;
               layerId = a.layerId;
           }
           // 凡例を繰り返し処理し、
           // テーブル行にアイテムを追加する
           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)
               });
               // base64画像を追加していますが、
               // Legendエンドポイントで提供される画像のURLを使うこともできます
               put(td1, 'img', {
                   src: 'data:image/png;base64,' + b.imageData
               });
           });
       });
    }, function(err) { console.debug('リクエストでエラー', err); });
    }
});
});

わあ、コードがたくさんありますね。ToCウィジェットについて学びたいと言っていましたね、それには少しコードが必要です。コメントも入れておきましたので参考にしてください。機能の一部を小さなモジュールに分けることもできるかもしれませんが、それはお任せします。

このサンプルでは

put-selector を使ってDOM要素を作成しています（ArcGIS JS APIに含まれています）。これはDOM作成時に私にはわかりやすいからです。また、見た目を良くするために Bootstrap を使用しており、CSSクラス名の一部はそこから来ています。完成すると、このサンプルは次のようになります。かなりかっこいいです

これが行うのは、visibleLayers内の個々のサービスとレイヤーをオフにすることです。このサンプルは ArcGISDynamicMapServiceLayer 用に設定されていますが、FeatureLayers用に調整したり、大胆にもカスタムレンダラーのサポートを追加したりすることも可能です。私はいつも何か問題を起こしがちなので避けていますが、実現可能です。頑張ってください。昔Flexでこれをやったときはもっと難しかった記憶があります。当時はREST APIにLegendエンドポイントがなかったと思うので、今の方が実際は簡単です。

マップサービスの凡例エンドポイントにアクセスして、自分だけのToCウィジェットを作るために必要なデータを取得する方法の概要を示したかっただけです。他のToCウィジェットで問題がある場合のトラブルシューティングにも役立つかもしれません。DOMでデータ表示を学ぶ良い練習であり、ときには本当にToCが必要になることもあります…かもしれません。

このサンプルの完全なソースコードはこちらで見つけられます。

もっと地理開発のヒントやコツが知りたい方は私のブログもぜひご覧ください！

ChrisSergent

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