マップとインターフェースを一致させる

ReneRubalcava

<\/HEAD>

<\/P>

https://www.flickr.com/photos/paloetic/4795592340/<\/A><\/SPAN><\/P>

<\/SPAN><\/P>マッピングアプリケーションに取り組んでいて、マップ上のデータに対応するデータをどこかにリスト表示していることはありませんか？過去には、リストやテーブルの関連項目にカーソルを合わせるとマップ上のフィーチャがハイライトされるサンプルを見たことがあります。<\/SPAN><\/P><\/SPAN><\/P>それはかっこいいですね。<\/SPAN><\/P><\/SPAN><\/P>でも、リスト内でその項目がマップ上のどれに対応しているかをすぐに見たいと思ったことはありませんか？おそらくマップで使われている一致するシンボロジーを使って？きっとありますよね？<\/EM><\/SPAN><\/P><\/SPAN><\/P>実は、それはそれほど難しいことではありません。<\/SPAN><\/P><\/SPAN><\/P>レンダラー（v3.x と v4beta の両方）には

getSymbol<\/A> というメソッドがあります。このメソッドは graphic を受け取ります。でももし graphic があればシンボルも持っているはずですよね、何を引き出そうとしているんですか？！<\/EM><\/STRONG><\/SPAN><\/P><\/SPAN><\/P>落ち着いてください。<\/SPAN><\/EM><\/P><\/SPAN><\/P>QueryTask を使ってデータをクエリしていると仮定しましょう。QueryTask の結果は Features（Graphics）ですが、シンボルは持っていません。そこでこれらの結果を繰り返し処理し、レンダラーからシンボルを取得できます。<\/SPAN><\/P><\/SPAN><\/P>このようなサンプルになるでしょう。<\/SPAN><\/P>require([\n  'esri/layers/FeatureLayer',\n  'esri/tasks/QueryTask',\n  'esri/tasks/support/Query'\n], function(\n  FeatureLayer, QueryTask, Query\n) {\n  var featureLayer = new FeatureLayer({\n    id: 'myLayer',\n    outFields: ['*'],\n    url: '<\/SPAN>http://services2.arcgis.com/LMBdfutQCnDGYUyc/arcgis/rest/services/Los_Angeles_County_Homeless_Programs_Services/FeatureServer/0<\/A>'<\/SPAN>\n  });\n  featureLayer.then(function() {\n    var node = document.getElementById('my-list');\n    var q = new Query({\n      where: '1=1',\n      outFields: ['*'],\n      returnGeometry: false\n    });\n    var qTask = new QueryTask(featureLayer.url);\n    var promise = qTask.execute(q).then(function(results) {\n      return results.features.map(function(a) {\n        var sym = featureLayer.renderer.getSymbol(a);\n        a.symbol = sym;\n        return a;\n      });\n    });\n    promise.then(function(features) {\n      features.map(function(feature) {\n        var attr = feature.attributes;\n        var sym = feature.symbol;\n        var item = document.createElement('li');\n        var img = document.createElement('img');\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.img.setAttribute('src', sym.source.url);\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.img.setAttribute('height', 25);\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.img.setAttribute('width', 25);\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.var span = document.createElement('span');\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.span.innerHTML = attr.ProgName;\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.item.appendChild(img);\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.item.appendChild(span);\n&nbsp.& nbsp.& nbsp.& nbsp.& nbsp.& nbsp.node.appendChild(item);\n . & nb sp ;& nb sp ;& nb sp ;& nb sp ;}); \ n & nb sp ;& nb sp ;}); \ n & nb sp ;}); \ n}); < / PRE >< P >< / P >< P >このサンプルにはマップは含まれていません。ここでの焦点ではないためです。FeatureLayer を作成して、そのレンダラーを利用しています。そしてレイヤーのクエリ時にレンダラーからシンボルを取得し、画像とテキスト付きのリスト要素を作成しています。< / P >< P >< / P >< P >このデモはこちらでご覧いただけます。< / P >< P class = " p 1 " >< SPAN class = " s 1 " >< / SPAN >< / P >< P class = " p 1 " >< SPAN class = " s 1 " >このサンプルを使って、アイテムをクリックしたときにマップ上の場所にズームしたり、ページの別の部分やポップアップで詳細データを表示したりすることも可能ですが、それは完全にあなた次第です。ここではフィーチャのシンボロジーに簡単にアクセスして実際のユーザーインターフェースで使用できることを示したかっただけです。さあ、自由にカスタマイズしてください！< / SPAN >< / P >< P class = " p 1 " >< SPAN class = " s 1 " >< / SPAN >< / P >< P class = " p 1 " >< SPAN class = " s 1 " >さらに多くの geodev のヒントやコツについては、私のブログをご覧ください< / A >。< / SPAN >< / P >< / BODY >< / HTML >