クイックヒント - 何をクリックしたの？

ReneRubalcava

<\/HEAD>

<\/P>

写真: pin points | Flickr - Photo Sharing!<\/A> <\/SPAN><\/P>

<\/P>

これが何度か出てきたのを見ました。マップにいくつかのFeatureLayersがあります。<\/P>

<\/P>

マップ上のクリックに対してリスナーを設定します。<\/P>

<\/P>

マップをクリックします。<\/P>

<\/P>

レイヤーが6つくらいあっても、返ってくるのは1つのグラフィックだけです。<\/P>

<\/P>

これはどういうこと？<\/EM><\/STRONG><\/P><\/P>そうですね、これはどのレイヤーがどこにあるかに関係しています。マップ上のグラフィックスはおそらく

SVG<\/A>です。SVGに塗りつぶしがない場合、クリックイベントを取得できません。ただし、不透明度をクリアに設定してもクリックイベントは取得できるので、それを覚えておいてください。<\/P>

<\/P>

しかし、これはウェブの仕様でもあります。SVGグラフィックス（すべてのDOM要素も同様）の動作では、クリックイベントは最上位の要素から発生します。他の要素にはクリックが伝わりません。<\/P>

<\/P>

つまり、詰んだということ？<\/EM><\/P><\/P>そんなことはありません。<\/STRONG><\/P><\/P>いくつか選択肢があります。まず一つ目は

QueryTask<\/A>を使う方法です。すべてのレイヤーをクエリして、クリックした場所のフィーチャーの結果を取得できます。これはきれいでシンプルな解決策で、多角形には非常に効果的です。ポイントやラインは少し難しいです。ポイントやラインの正確な位置をクリックしないと結果が得られません。そのため、クリックした場所に対してGeometryEngine<\/A>を使って小さなバッファを作成し、より良い結果を得ることもできます。それはお任せします<\/EM>。<\/P><\/P>またIdentifyTask<\/A>を使う方法もあります。FeatureLayersで使用する場合は設定に少し手間がかかり、先ほど話したバッファに似たトレランスで試行錯誤する必要があります。<\/P>

<\/P>

個人的にはバッファ付きジオメトリでQueryTaskを使う方が良い解決策だと思いますが、少なくとも選択肢はいくつかあります<\/EM>。<\/P><\/P>こんな感じになるでしょう:<\/P><\/P>require([\n  "esri\/_map",\n  "esri\/_layers\/_FeatureLayer",\n  "esri\/_tasks\/_query",\n  "esri\/_tasks\/_IdentifyTask",\n  "esri\/_tasks\/_IdentifyParameters",\n  "dojo\/_promise\/_all",\n  "dojo\/_domReady!"\n], function(Map, FeatureLayer, Query, IdTask, IdParams, all) { \n  var map = new Map("mapDiv", {\n    center: [-118.182, 33.913],\n    zoom: 14,\n    basemap: "topo"\n  });\n  \n  var layer0 = new FeatureLayer("

http:\/\/sampleserver1.arcgisonline.com\/ArcGIS\/rest\/services\/Demographics\/ESRI_Census_USA\/MapServer\/0");\n  \n  var layer1 = new FeatureLayer("http:\/\/sampleserver1.arcgisonline.com\/ArcGIS\/rest\/services\/Demographics\/ESRI_Census_USA\/MapServer\/1");\n  \n  map.addLayers([layer0, layer1]);\n  \n  \/\/- 従来の方法\n  map.on('click', function(e) {\n    \/\/- グラフィックは一つだけ \n    console.log(e.graphic);\n    \/\/- さあ面白くしよう *_* \n    var q = new Query();\n    q.returnGeometry = true;\n    q.outFields = ["*"];\n    q.geometry = e.mapPoint;\n    \/\/- 距離と単位はHosted Feature Services専用 \n    q.units = "feet";\n    q.distance = 50;\n    \/\/- すべてのFeatureLayersをクエリする \n    var defs = [layer0, layer1].map(function(x) {\n      return x.queryFeatures(q);\n    });\n    all(defs).then(function(results) {\n      console.log("all query results", results);\n    });\n    \n    \/\/- またはIdentifyTaskを使う、超面白い！ #_# \n    var idParams = new IdParams();\n    idParams.geometry = e.mapPoint;\n    idParams.mapExtent = map.extent;\n    \/\/- トレランスは実験が必要です \n    \/\/- 望む結果を得るために \n    idParams.tolerance = 10;\n    idParams.layerOption = IdParams.LAYER_OPTION_ALL;\n    var url = layer0.url.substr(0, layer0.url.lastIndexOf("\\/"));\n    idParams.layerIds = [layer0, layer1].map(function(x) {\n      return x.url.substr(x.url.lastIndexOf("\\/") + 1, x.length);\n    });\n    console.log(idParams);\n    var idTask = new IdTask(url);\n    idTask.execute(idParams).then(function(results) {\n      console.log("id results", results);\n    });\n  });\n });< /PRE >< P >< / P >< P > < A href = "http://jsbin.com/zexife/2/edit?js,output" rel = "nofollow noopener noreferrer" target = "_blank">ライブデモはこちら 。 < / P >< P >< / P >< P >だから、小さな制限に落ち込まないでください。少し努力すればほとんど何でもできますよ。 < / P >< P >< / P >< P >もっと多くのgeodevヒントやコツについては、 < A href = "http://odoe.net/blog/" rel = "nofollow noopener noreferrer" target = "_blank">私のブログをご覧ください 。 < / BODY >< / HTML >