nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Selecting Points under Polygon

RohitGarg

Hello All,

I have created polygon, now i want to select points under polygon on click... please help me..

this is my code:-

[HTML]

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>

<script type="text/javascript">
    dojo.require("esri.map");
    dojo.require("esri.tasks.geometry");
    dojo.require("esri.geometry");

    var map = null;
    var gsvc = null;
    var qtask = null;
    var polygonGraphic = null;
    var queryGraphic = null;

    function initialize() {
      map = new esri.Map("map");
      dojo.connect(map, "onLoad", function () {
        drawPolygon();
      });

   var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver:8399/arcgis/rest/services/Data_Demo/MapServer/");
   map.addLayer(layer);

      map.setExtent(new esri.geometry.Extent(72.81, 18.95, 72.85, 18.98, new esri.SpatialReference({wkid: 4326})));

      gsvc = new esri.tasks.GeometryService("http://myserver:8399/arcgis/rest/services/Geometry/GeometryServer");

   qtask = new esri.tasks.QueryTask("http://myserver:8399/arcgis/rest/services/Data_Demo/MapServer/2");
}
function drawPolygon() {
      var latOffset, lonOffset, center, lat, lon, points;
       center = map.extent.getCenter();

     var Lat = 76.85; var Lon = 26.298; var Lat1= 72.8296; var Lng1= 18.99522;
     var Lat2= 72.819175; var Lng2= 18.970838; var Lat3= 72.828; var Lng3= 18.969;
     var Lat4= 72.832; var Lng4= 18.951; var Lat5= 72.823697;var Lng5= 18.946847;
    var Lat6= 72.826775035; var Lng6= 18.93383939; var Lat7 = 72.8150861175;
   var Lng7 = 18.96397220334;var Lat8 = 72.81860278088;var Lng8 = 18.951649999;

    var polygon = {"rings":[[[Lat1,Lng1],[Lat3,Lng3],[Lat6,Lng6], [Lat5,Lng5],[Lat8,Lng8],[Lat7,Lng7], [Lat2,Lng2], [Lat1,Lng1]]],
"spatialReference":{" wkid":4326 }};

var polygon = new esri.geometry.Polygon(polygon);

      var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
      polygonGraphic = new esri.Graphic(polygon, symbol);
      map.graphics.add(polygonGraphic);

    }

    function doSimplify() {
gsvc.simplify([ polygonGraphic.geometry ], doQuery(polygonGraphic));
    }

    function doQuery(polygonGraphic) {
      var query = new esri.tasks.Query();
      //query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
      query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
      query.geometry = polygonGraphic.geometry;
      query.returnGeometry = true;
      qtask.execute(query, queryCallback);
    }

    function queryCallback(featureSet) {
      map.graphics.remove(queryGraphic);

var symbol = new esri.symbol.SimpleMarkerSymbol();
          symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
          symbol.setSize(8);
          symbol.setColor(new dojo.Color([255,255,0,0.5]));

      var features = featureSet.features;
      var point = new esri.geometry.Point();
      queryGraphic = new esri.Graphic(point,symbol)
      map.graphics.add(queryGraphic);

    }

    dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Simplify the polygon and Do a Query with simplified polygon" onclick="doQuery(polygonGraphic);" />
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>

</HTML>

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

RohitGarg

Hello,

I have 2 polygon, I want to select those point which is under Polygon 2. Is it possible ?

Below is the code shows 2 polygons and selecting all points(under polygon 1 and polygon 2).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");

var map = null;
var gsvc = null;
var qtask = null;
var polygonGraphic = null;
var polygonGraphic2 = null;
var queryGraphic = null;
var extent = null;

function initialize() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", function () {
   drawPolygon();
   drawPolygon2();
});

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
map.addLayer(layer);
extent = map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
}
function drawPolygon() {
var polygon = {"rings":[[
   [-115.930, 36.540],
   [-115.740, 36.540],
   [-115.740, 36.640],
   [-115.930, 36.640],
   [-115.930, 36.540]
]],
"spatialReference":{" wkid":4269}};

var polygon = new esri.geometry.Polygon(polygon);
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_NULL);
polygonGraphic = new esri.Graphic(polygon, symbol);
map.graphics.add(polygonGraphic);
}

function drawPolygon2() {
var polygon2 = {"rings":[[
   [-115.950, 36.520],
   [-115.740, 36.520],
   [-115.740, 36.650],
   [-115.950, 36.650],
   [-115.950, 36.520]
]],
"spatialReference":{" wkid":4269}};

var polygon2 = new esri.geometry.Polygon(polygon2);
var symbol2 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_CROSS);

polygonGraphic2 = new esri.Graphic(polygon2, symbol2);
map.graphics.add(polygonGraphic2);
}

function doQuery() {
var query = new esri.tasks.Query();
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
query.geometry = polygonGraphic2.geometry;
query.returnGeometry = true;
qtask.execute(query, queryCallback);
}

function queryCallback(featureSet) {
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(15);
symbol.setColor(new dojo.Color([255,255,0,0.5]));

var features = featureSet.features;
dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
});
}

dojo.addOnLoad(initialize);
</script>
</head>
<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>

RohitGarg

Hello Derek,

Below is my code :-

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");

var map = null;
var gsvc = null;
var qtask = null;
var polygonGraphic = null;
var queryGraphic = null;

function initialize() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", function () {
   drawPolygon();
});

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer/");
map.addLayer(layer);
map.setExtent(new esri.geometry.Extent({"xmin":-85.96,"ymin":37.985,"xmax":-85.385,"ymax":38.393,"spatialReference":{"wkid":4326}}));
gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServer/12");
}

function drawPolygon() {
var polygon = {"rings":[[
   [-85.950, 38.000], [-85.0, 37.9],
   [-85.440, 38.540],
   [-85.740, 38.640],
   [-85.930, 38.640],
   [-85.950, 38.000]
]],
"spatialReference":{" wkid":4326}};

var polygon = new esri.geometry.Polygon(polygon);
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
polygonGraphic = new esri.Graphic(polygon, symbol);
map.graphics.add(polygonGraphic);
}

function doQuery() {
var query = new esri.tasks.Query();
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_TOUCHES;
query.geometry = polygonGraphic.geometry;
query.returnGeometry = true;
qtask.execute(query, queryCallback);

alert("hidoQ");
}

function queryCallback(featureSet) {

var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 5);

var features = featureSet.features;

alert("1");

dojo.forEach(features, function(feature){feature.setSymbol(symbol); map.graphics.add(features);
   alert("5");
});
}

dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onClick="doQuery();" />
<div id="map" style="width:800px; height:400px; border:1px solid #000;"></div>
</body>

</html>

What is the error message?

RohitGarg

What is the error message?

Thanks for the reply... I want show error alert, if polyline touches/crossess polygon, it should throw some error like "polyline cross the line" with line name.

derekswingley1

What is the error message?

RohitGarg

Hello Derek,

I have a one query. Like I have one polygon and one Polyline, If Polyline cross Polygon then it will through error alert message.

Can you please help me.

Regards,
RG
email:-rohitgarg83@gmail.com

RohitGarg

Thanks Derek, Great... now its working fine in my application.

There are a few issues...
-your doSimplify function is never used
-you don't need to pass in your polygonGraphic to doQuery since polygonGraphic is global

I put together a working example using services hosted by esri:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
 html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
 dojo.require("esri.map");

 var map = null;
 var gsvc = null;
 var qtask = null;
 var polygonGraphic = null;
 var queryGraphic = null;

 function initialize() {
  map = new esri.Map("map");
  dojo.connect(map, "onLoad", function () {
   drawPolygon();
  });

  var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayer(layer);
  map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
  gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
 }
 function drawPolygon() {
  var polygon = {"rings":[[
   [-115.930, 36.540], 
   [-115.740, 36.540], 
   [-115.740, 36.640], 
   [-115.930, 36.640],
   [-115.930, 36.540]
  ]],
  "spatialReference":{" wkid":4269}};

  var polygon = new esri.geometry.Polygon(polygon);
  var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
  polygonGraphic = new esri.Graphic(polygon, symbol);
  map.graphics.add(polygonGraphic);
 }

 function doQuery() {
  var query = new esri.tasks.Query();
  query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
  query.geometry = polygonGraphic.geometry;
  query.returnGeometry = true;
  qtask.execute(query, queryCallback);
 }

 function queryCallback(featureSet) {
  var symbol = new esri.symbol.SimpleMarkerSymbol();
  symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
  symbol.setSize(8);
  symbol.setColor(new dojo.Color([255,255,0,0.5]));

  var features = featureSet.features;
  dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
  });
 }

 dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>

derekswingley1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
 html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>

<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6" type="text/javascript"></script>
<script type="text/javascript">
 dojo.require("esri.map");

 var map = null;
 var gsvc = null;
 var qtask = null;
 var polygonGraphic = null;
 var queryGraphic = null;

 function initialize() {
  map = new esri.Map("map");
  dojo.connect(map, "onLoad", function () {
   drawPolygon();
  });

  var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
  map.addLayer(layer);
  map.setExtent(new esri.geometry.Extent({"xmin":-115.960,"ymin":36.524,"xmax":-115.734,"ymax":36.648,"spatialReference":{"wkid":4269}}));
  gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
  qtask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
 }
 function drawPolygon() {
  var polygon = {"rings":[[
   [-115.930, 36.540], 
   [-115.740, 36.540], 
   [-115.740, 36.640], 
   [-115.930, 36.640],
   [-115.930, 36.540]
  ]],
  "spatialReference":{" wkid":4269}};

  var polygon = new esri.geometry.Polygon(polygon);
  var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
  polygonGraphic = new esri.Graphic(polygon, symbol);
  map.graphics.add(polygonGraphic);
 }

 function doQuery() {
  var query = new esri.tasks.Query();
  query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
  query.geometry = polygonGraphic.geometry;
  query.returnGeometry = true;
  qtask.execute(query, queryCallback);
 }

 function queryCallback(featureSet) {
  var symbol = new esri.symbol.SimpleMarkerSymbol();
  symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
  symbol.setSize(8);
  symbol.setColor(new dojo.Color([255,255,0,0.5]));

  var features = featureSet.features;
  dojo.forEach(features, function(feature) {
   feature.setSymbol(symbol);
   map.graphics.add(feature);
  });
 }

 dojo.addOnLoad(initialize);
</script>

</head>

<body class="tundra">

<input type="button" value="Query for points within the polygon graphic." onclick="doQuery();" />
<div id="map" style="width:1000px; height:600px; border:1px solid #000;"></div>
</body>

</html>

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.