Astuce rapide - Sur quoi ai-je cliqué ?

ReneRubalcava

<\/HEAD>

<\/P>

Photo : pin points | Flickr - Partage de photos !<\/A> <\/SPAN><\/P>

<\/P>

Donc, j'ai vu cela apparaître plusieurs fois. Vous avez quelques FeatureLayers sur votre carte.<\/P>

<\/P>

Vous configurez un écouteur pour les clics sur la carte.<\/P>

<\/P>

Vous cliquez sur la carte.<\/P>

<\/P>

Vous avez peut-être six couches, mais vous ne récupérez qu'un seul graphique.<\/P>

<\/P>

Qu'est-ce que c'est que ça ?<\/EM><\/STRONG><\/P><\/P>D'accord, donc oui, cela concerne simplement quelles couches sont où. Les graphiques sur votre carte sont probablement en

SVG<\/A>. Il se trouve que si un SVG n'a pas de remplissage, vous ne pouvez pas obtenir d'événement de clic à partir de celui-ci. Cependant, vous pouvez définir l'opacité à clair et toujours obtenir un événement de clic, alors gardez cela à l'esprit.<\/P>

<\/P>

Mais c'est aussi une chose du web. La façon dont fonctionnent les graphiques SVG (tous les éléments DOM en réalité), l'événement de clic ne remonte que depuis l'élément supérieur. Il ne clique pas à travers les autres éléments.<\/P>

<\/P>

Alors vous êtes coincé, non ?<\/EM><\/P><\/P>Pas si vite.<\/STRONG><\/P><\/P>Vous avez plusieurs options ici. La première est d'utiliser une

QueryTask<\/A>. Vous pouvez simplement interroger toutes les couches et obtenir des résultats pour les entités à l'emplacement où vous avez cliqué. C'est une solution propre et fonctionne très bien pour les polygones. Les points et lignes sont un peu plus délicats. Si vous ne cliquez pas exactement là où se trouve le point ou la ligne, vous n'obtiendrez pas de résultat. Vous pourriez donc créer un petit tampon autour de l'emplacement où vous avez cliqué en utilisant le GeometryEngine<\/A> si vous souhaitez essayer d'obtenir un meilleur résultat. Je vous laisse décider<\/EM>.<\/P><\/P>Vous pouvez également utiliser la IdentifyTask<\/A>. Cela demande un peu plus de travail pour être configuré lors de l'utilisation des FeatureLayers et d'expérimenter avec une tolérance, ce qui est similaire au tampon dont nous avons parlé précédemment.<\/P>

<\/P>

Personnellement, je pense que la QueryTask avec une géométrie tamponnée est une meilleure solution, mais au moins vous avez quelques options<\/EM>.<\/P><\/P>Voici à quoi cela pourrait ressembler :<\/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éthode conventionnelle\n  map.on('click', function(e) {\n    \/\/- un seul graphique \n    console.log(e.graphic);\n    \/\/- on va s'amuser *_*\n    var q = new Query();\n    q.returnGeometry = true;\n    q.outFields = ["*"];\n    q.geometry = e.mapPoint;\n    \/\/- distance et unités sont uniquement pour les Hosted Feature Services \n    q.units = "feet";\n    q.distance = 50;\n    \/\/- Interroger toutes les FeatureLayers\n    var defs = [layer0, layer1].map(function(x) {\n      return x.queryFeatures(q);\n    });\n    all(defs).then(function(results) {\n      console.log("tous les résultats de la requête", results);\n    });\n    \n    \/\/- Ou utiliser IdentifyTask, super cool ! #_#\n    var idParams = new IdParams();\n    idParams.geometry = e.mapPoint;\n    idParams.mapExtent = map.extent;\n    \/\/- Vous devrez expérimenter avec la tolérance \n    \/\/- pour obtenir les résultats souhaités \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("résultats d'identification", results);\n    });\n  });\n });< /PRE >< P >< / P >< P >Vous pouvez trouver une < A href= "http://jsbin.com/zexife/2/edit?js,output" rel= "nofollow noopener noreferrer" target= "_blank" > démo en direct ici < / A > . < / P >< P >< / P >< P >Alors ne laissez pas de petites limitations vous décourager. Vous pouvez réaliser presque tout avec un peu d'huile de coude.< / P >< P >< / P >< P >Pour plus d'astuces geodev, < A href= "http://odoe.net/blog/" rel= "nofollow noopener noreferrer" target= "_blank" > consultez mon blog < / A > . < / P >< / BODY >< / HTML >