Dica Rápida - No que eu cliquei?

ReneRubalcava

<\/HEAD>

<\/P>

Foto: pin points | Flickr - Compartilhamento de Fotos!<\/A> <\/SPAN><\/P>

<\/P>

Então, eu já vi isso acontecer algumas vezes. Você tem algumas FeatureLayers no seu mapa.<\/P>

<\/P>

Você configura um listener para cliques no mapa.<\/P>

<\/P>

Você clica no mapa.<\/P>

<\/P>

Você tem talvez seis camadas, mas só recebe de volta um gráfico.<\/P>

<\/P>

O que está acontecendo?<\/EM><\/STRONG><\/P><\/P>Ok, então sim, isso tem a ver com quais camadas estão onde. Os gráficos no seu mapa provavelmente são

SVG<\/A>. Acontece que se um SVG não tem preenchimento, você não consegue obter um evento de clique nele. No entanto, você pode definir a opacidade para transparente e ainda assim obter um evento de clique, então tenha isso em mente.<\/P>

<\/P>

Mas também é uma coisa da web. A forma como os gráficos SVG funcionam (todos os elementos DOM na verdade), o evento de clique vem apenas do elemento superior. Ele não passa para outros elementos.<\/P>

<\/P>

Então você está ferrado, certo?<\/EM><\/P><\/P>Não tão rápido.<\/STRONG><\/P><\/P>Você tem algumas opções aqui. A primeira é usar um

QueryTask<\/A>. Você pode simplesmente consultar todas as camadas e obter resultados para feições na localização onde você clicou. Esta é uma solução limpa e funciona muito bem para polígonos. Pontos e Linhas são um pouco mais complicados. Se você não clicar exatamente onde o ponto ou linha está, não obterá um resultado. Então você poderia fazer um pequeno buffer da localização onde clicou usando o GeometryEngine<\/A> se quiser tentar obter um resultado melhor. Deixo isso com você<\/EM>.<\/P><\/P>Você também pode usar o IdentifyTask<\/A>. Isso requer um pouco mais de trabalho para configurar ao usar FeatureLayers e experimentar com uma tolerância, que é semelhante ao buffer que falamos anteriormente.<\/P>

<\/P>

Pessoalmente, acho que o QueryTask com uma geometria bufferizada é uma solução melhor, mas pelo menos você tem algumas opções<\/EM>.<\/P><\/P>Aqui está como isso pode parecer:<\/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  \/\/- método convencional\n  map.on('click', function(e) {\n    \/\/- apenas um gráfico \n    console.log(e.graphic);\n    \/\/- vamos ficar loucos *_*\n    var q = new Query();\n    q.returnGeometry = true;\n    q.outFields = ["*"];\n    q.geometry = e.mapPoint;\n    \/\/- distância e unidades são apenas para Hosted Feature Services \n    q.units = "feet";\n    q.distance = 50;\n    \/\/- Consultar todas as FeautreLayers\n    var defs = [layer0, layer1].map(function(x) {\n      return x.queryFeatures(q);\n    });\n    all(defs).then(function(results) {\n      console.log("todos os resultados da consulta", results);\n    });\n    \n    \/\/- Ou use IdentifyTask, super louco! #_#\n    var idParams = new IdParams();\n    idParams.geometry = e.mapPoint;\n    idParams.mapExtent = map.extent;\n    \/\/- Você precisará experimentar com a tolerância\n    \/\/- para obter os resultados desejados\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("resultados do id", results);\n    });\n  });\n });Você pode encontrar uma demonstração ao vivo aqui.Então não deixe pequenas limitações te desanimarem. Você pode fazer praticamente qualquer coisa com um pouco de esforço.Para mais dicas e truques geodev, confira meu blog.