Hello,
Is there an example out there that uses esri.tasks.Query.SPATIAL_REL_WITHIN to find out if a selected graphic is located inside of a polygon?
Thanks!
Jenna,
Not exactly what you asked for but another way to do it:
If you really need it to use a QueryTask then let me know and I will change the sample to use QueryTask
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Buffer</title> <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #messages { background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } #drop { background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 105px; z-index: 40; } </style> <script src="http://js.arcgis.com/3.11/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/tasks/query", "esri/geometry/Circle", "esri/units", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/config", "esri/Color", "dojo/dom", "dijit/form/ComboBox", "dojo/domReady!" ], function ( Map, FeatureLayer, Query, Circle, Units, Graphic, InfoTemplate, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, esriConfig, Color, dom ) { // use a proxy page if a URL generated by this page is greater than 2000 characters // // this should not be needed as nearly all query & select functions are performed on the client esriConfig.defaults.io.proxyUrl = "/proxy/"; map = new Map("mapDiv", { basemap: "streets", center: [-81.00, 34.000], zoom: 14, slider: false }); //add the census block points in on demand mode. Note that an info template has been defined so when //selected features are clicked a popup window will appear displaying the content defined in the info template. var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", { outFields: ["POP2000", "HOUSEHOLDS", "HSE_UNITS", "TRACT", "BLOCK"] }); // selection symbol used to draw the selected census block points within the buffer polygon var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 6, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([200, 120, 101, 0.9]), 1), new Color([200, 0, 0, 1]) ); featureLayer.setSelectionSymbol(symbol); //make unselected features invisible var nullSymbol = new SimpleMarkerSymbol().setSize(0); featureLayer.setRenderer(new SimpleRenderer(nullSymbol)); map.addLayer(featureLayer); var circleSymb = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([105, 105, 105]), 2 ), new Color([255, 255, 0, 0.25]) ); var circle; //when the map is clicked create a buffer around the click point of the specified distance. map.on("click", function (evt) { selbuf = document.FormSelection.BufferSelection.selectedIndex; var BufferSelection = document.FormSelection.BufferSelection.options[selbuf].value; circle = new Circle({ center: evt.mapPoint, geodesic: true, radius: BufferSelection, radiusUnit: Units.MILES }); map.graphics.clear(); map.infoWindow.hide(); var graphic = new Graphic(circle, circleSymb); map.graphics.add(graphic); var query = new Query(); query.geometry = circle; featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (results) { var totalPopulation = sumPopulation(results); var r = ""; r = "<b>The total Census Block population within the buffer is <i>" + totalPopulation + "</i>.</b>"; dom.byId("messages").innerHTML = r; }); }); function sumPopulation(features) { var popTotal = 0; for (var x = 0; x < features.length; x++) { popTotal = popTotal + features.attributes["POP2000"]; } return popTotal; } }); </script> </head> <body> <span id="messages">Click on the map to select census block points within mile.</span> <span id="drop"> <form name="FormSelection"> <select name="BufferSelection"> <option>1</option> <option>2</option> <option>10</option> </select> </form> </span> <div id="mapDiv"></div> </body> </html>
Hi Jenna,
Here is an example where you can click on a point and it will select the polygon it is completely within.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Sample Map</title> <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> <style> html, body, #mapDiv { padding:0; margin:0; height:100%; } </style> <script src="http://js.arcgis.com/3.12/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/graphic", "esri/tasks/query", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/geometry/Polygon", "dojo/_base/Color", "dojo/dom", "dojo/on", "dojo/_base/array", "dojo/parser", "dijit/registry", "dojo/domReady!" ], function( Map, FeatureLayer, Graphic, Query, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, Polygon, Color, dom, on, array, parser, registry ) { parser.parse(); map = new Map("mapDiv", { basemap: "streets", center: [-81.792107, 26.150807], zoom: 8 }); var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var symbol = new SimpleMarkerSymbol( SimpleMarkerSymbol.STYLE_CIRCLE, 12, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([247, 34, 101, 0.9]), 1 ), new Color([207, 34, 171, 0.5]) ); var highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([125, 125, 125, 0.35]) ); var featureLayer2 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2", { mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }) map.addLayers([featureLayer2, featureLayer]); featureLayer.on("click", function(evt){ map.graphics.clear(); highlightPoint = new Graphic(evt.graphic.geometry, symbol); map.graphics.add(highlightPoint); var query = new Query(); query.outFields = "*"; query.spatilRelationship = Query.SPATIAL_REL_WITHIN; query.geometry = highlightPoint.geometry; featureLayer2.queryFeatures(query, function(features){ array.forEach(features.features, function(feature){ highlightGraphic = new Graphic(feature.geometry, highlightSymbol); map.graphics.add(highlightGraphic); }) }) }) }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>