Consejo Rápido - ¿En qué hice clic?

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/P>

He visto que esto aparece un par de veces. Tienes algunas FeatureLayers en tu mapa.<\/P>

<\/P>

Configuras un listener para clics en el mapa.<\/P>

<\/P>

Haces clic en el mapa.<\/P>

<\/P>

Tienes tal vez seis capas, pero solo recibes un gráfico.<\/P>

<\/P>

¿Qué pasa con eso?<\/EM><\/STRONG><\/P><\/P>Ok, sí, esto tiene que ver con qué capas están dónde. Los gráficos en tu mapa probablemente sean

SVG<\/A>. Resulta que si un SVG no tiene relleno, no puedes obtener un evento de clic de él. Sin embargo, puedes establecer la opacidad a transparente y aún así obtener un evento de clic, así que tenlo en cuenta.<\/P>

<\/P>

Pero también es algo del web. La forma en que funcionan los gráficos SVG (todos los elementos DOM realmente), el evento de clic solo proviene del elemento superior. No hace clic a través de otros elementos.<\/P>

<\/P>

¿Entonces estás atrapado, verdad?<\/EM><\/P><\/P>No tan rápido.<\/STRONG><\/P><\/P>Tienes un par de opciones aquí. La primera es usar un

QueryTask<\/A>. Simplemente puedes consultar todas las capas y obtener resultados para las features en la ubicación donde hiciste clic. Esta es una solución limpia y funciona muy bien para polígonos. Los puntos y líneas son un poco más complicados. Si no haces clic exactamente donde está el punto o la línea, no obtendrás un resultado. Así que podrías hacer un pequeño buffer de la ubicación donde hiciste clic usando el GeometryEngine<\/A> si quieres intentar obtener un mejor resultado. Te dejo eso a ti<\/EM>.<\/P><\/P>También puedes usar el IdentifyTask<\/A>. Esto requiere un poco más de trabajo para configurar cuando usas FeatureLayers y experimentar con una tolerancia, que es similar al buffer del que hablamos antes.<\/P>

<\/P>

Personalmente creo que QueryTask con una geometría buffered es una mejor solución, pero al menos tienes algunas opciones<\/EM>.<\/P><\/P>Esto es cómo podría verse:<\/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    \/\/- solo un gráfico \n    console.log(e.graphic);\n    \/\/- vamos a ponernos creativos *_*\n    var q = new Query();\n    q.returnGeometry = true;\n    q.outFields = ["*"];\n    q.geometry = e.mapPoint;\n    \/\/- distancia y unidades son solo para Hosted Feature Services \n    q.units = "feet";\n    q.distance = 50;\n    \/\/- Consultar todas las FeatureLayers\n    var defs = [layer0, layer1].map(function(x) {\n      return x.queryFeatures(q);\n    });\n    all(defs).then(function(results) {\n      console.log("todos los resultados de la consulta", results);\n    });\n    \n    \/\/- O usa IdentifyTask, súper creativo! #_#\n    var idParams = new IdParams();\n    idParams.geometry = e.mapPoint;\n    idParams.mapExtent = map.extent;\n    \/\/- Necesitarás experimentar con la tolerancia \n    \/\/- para obtener los resultados deseados\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 de identificación", results);\n  });
});
});<//P>Puedes encontrar una demo en vivo aquí.

<//P>

No dejes que pequeñas limitaciones te desanimen. Puedes lograr casi cualquier cosa con un poco de esfuerzo.

<//P>

Para más consejos y trucos geodev, visita mi blog.