Snelle Tip - Waar heb ik op geklikt?

ReneRubalcava

<\/HEAD>

<\/P>

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

<\/P>

Ik heb dit een paar keer voorbij zien komen. Je hebt wat FeatureLayers op je kaart.<\/P>

<\/P>

Je stelt een listener in voor klikken op de kaart.<\/P>

<\/P>

Je klikt op de kaart.<\/P>

<\/P>

Je hebt misschien zes lagen, maar je krijgt maar één graphic terug.<\/P>

<\/P>

Wat is hier aan de hand?<\/EM><\/STRONG><\/P><\/P>Oké, dit heeft gewoon te maken met welke lagen waar zijn. Graphics op je kaart zijn waarschijnlijk

SVG<\/A>. Het gebeurt dat als een SVG geen vulling heeft, je er geen klikgebeurtenis van kunt krijgen. Je kunt echter de opacity op clear zetten en toch een klikgebeurtenis krijgen, dus houd dat in gedachten.<\/P>

<\/P>

Maar het is ook een webding. De manier waarop SVG graphics werken (alle DOM-elementen eigenlijk), komt de klikgebeurtenis alleen van het bovenste element. Het klikt niet door naar andere elementen.<\/P>

<\/P>

Dus ben je vastgelopen toch?<\/EM><\/P><\/P>Nog niet zo snel.<\/STRONG><\/P><\/P>Je hebt hier een paar opties. De eerste is om een

QueryTask<\/A> te gebruiken. Je kunt simpelweg alle lagen query'en en resultaten krijgen voor features op de locatie waar je hebt geklikt. Dit is een mooie schone oplossing en werkt geweldig voor polygonen. Punten en lijnen zijn iets lastiger. Als je niet precies klikt waar het punt of de lijn is, krijg je geen resultaat. Dus je zou een kleine buffer kunnen maken rond de locatie waarop je hebt geklikt met behulp van de GeometryEngine<\/A> als je wilt proberen een beter resultaat te krijgen. Dat laat ik aan jou over<\/EM>.<\/P><\/P>Je kunt ook de IdentifyTask<\/A> gebruiken. Dit vergt iets meer werk om in te stellen bij gebruik van FeatureLayers en experimenteren met een tolerance, wat vergelijkbaar is met de buffer die we eerder bespraken.<\/P>

<\/P>

Persoonlijk denk ik dat de QueryTask met een gebufferde geometrie een betere oplossing is, maar tenminste heb je wat opties<\/EM>.<\/P><\/P>Zo zou dit eruit kunnen zien:<\/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  \/\/- conventionele methode\n  map.on('click', function(e) {\n    \/\/- slechts één graphic \n    console.log(e.graphic);\n    \/\/- laten we gek doen *_*\n    var q = new Query();\n    q.returnGeometry = true;\n    q.outFields = ["*"];\n    q.geometry = e.mapPoint;\n    \/\/- afstand en units zijn alleen voor Hosted Feature Services \n    q.units = "feet";\n    q.distance = 50;\n    \/\/- Query alle FeautreLayers\n    var defs = [layer0, layer1].map(function(x) {\n      return x.queryFeatures(q);\n    });\n    all(defs).then(function(results) {\n      console.log("alle query resultaten", results);\n    });\n    \n    \/\/- Of gebruik IdentifyTask, super gek! #_#\n    var idParams = new IdParams();\n    idParams.geometry = e.mapPoint;\n    idParams.mapExtent = map.extent;\n    \/\/- Je moet experimenteren met tolerance\n    \/\/- om de gewenste resultaten te krijgen\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 resultaten", results);\n    });\n  });\n });Je kunt een live demo hier vinden.Laat je dus niet ontmoedigen door kleine beperkingen. Je kunt bijna alles gedaan krijgen met een beetje doorzettingsvermogen.Voor meer geodev tips en trucs, bekijk mijn blog.