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!
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>
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>
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
