topic Spatial Query in ArcGIS JavaScript Maps SDK Questions

Spatial Query

JennaWalz2 — Fri, 22 Jan 2016 16:51:23 GMT

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!

Re: Spatial Query

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:17:48 GMT

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>

Re: Spatial Query

JakeSkinner — Sun, 12 Dec 2021 00:17:51 GMT

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>