AnsweredAssumed Answered

hi i am trying to draw a polygon then find all roads inside that polygon i am not able show roads inside my polygon

Question asked by tamimicg on Apr 16, 2015
Latest reply on Apr 16, 2015 by rscheitlin

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="width=device-width,user-scalable=no">

    <!--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>Maps Toolbar</title>

   

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">

    <style>

      html, body, #mainWindow {

        font-family: sans-serif;

        height: 100%;

        width: 100%;

      }

      html, body {

        margin: 0;

        padding: 0;

      }

      #header {

        height: 80px;

        overflow: auto;

        padding: 0.5em;

      }

    </style>

   

    <script src="http://js.arcgis.com/3.12/"></script>

    <script>

      var map, toolbar, symbol, geomTask;

      var _public = {};

 

 

      require([

        "esri/map",

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/layers/ImageParameters",

        "esri/toolbars/draw",

        "esri/graphic",

        "esri/geometry/Polygon",

        "esri/tasks/QueryTask",

        "esri/tasks/query",

        "esri/tasks/FeatureSet",

        "esri/geometry/Point",

        "esri/SpatialReference",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

 

 

        "dojo/parser", "dijit/registry",

 

 

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

        "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"

      ], function(

        Map,

        ArcGISDynamicMapServiceLayer,

        ImageParameters,

        Draw,

        Graphic,

        Polygon,

        QueryTask,

        Query,

        FeatureSet,

        Point,

        SpatialReference,

        SimpleMarkerSymbol,

        SimpleLineSymbol,

        SimpleFillSymbol,

        parser,

        registry

      ) {

        parser.parse();

 

 

        map = new Map("map", {

          sliderOrientation : "horizontal"

        });

       

        var imageParameters = new ImageParameters();

        imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

 

 

        //Takes a URL to a non cached map service.

        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", {

          "opacity" : 0.5,

          "imageParameters" : imageParameters

        });

       

        map.addLayer(dynamicMapServiceLayer);

       

       

       

       

        map.on("load", createToolbar);

 

 

        // loop through all dijits, connect onClick event

        // listeners for buttons to activate drawing tools

        registry.forEach(function(d) {

          // d is a reference to a dijit

          // could be a layout container or a button

          if ( d.declaredClass === "dijit.form.Button" ) {

            d.on("click", activateTool);

          }

        });

 

 

        function activateTool() {

          var tool = this.label.toUpperCase().replace(/ /g, "_");

          toolbar.activate(Draw[tool]);

          map.hideZoomSlider();

        }

 

 

        function createToolbar(themap) {

          toolbar = new Draw(map);

          toolbar.on("draw-end", addToMap);

        }

       

    /*    function KabTest(evt){

            alert ("jjjjj");

        }*/

       

     var _kabqueryInside;

   var featureSet = new FeatureSet();

 

 

        function addToMap(evt) {

      

            _public._kabevt= evt;

           

        alert ("here i am in 1");

          var symbol;

          toolbar.deactivate();

          map.showZoomSlider();

          switch (evt.geometry.type) {

         

 

 

         

            case "point":

            case "multipoint":

              symbol = new SimpleMarkerSymbol();

              break;

            case "polyline":

            alert ("this is free hand polyline");

              symbol = new SimpleLineSymbol();

              break;

            default:

              symbol = new SimpleFillSymbol();

              break;

          }

          var graphic = new Graphic(evt.geometry, symbol);

         

          _public._kabgraphic=graphic;

           alert ("here i am in graphic adding");

          map.graphics.add(graphic);

         

          _public._kabgraphic=graphic;

          var stateExtent = evt.geometry.getExtent().expand(1.0);

         

         

         

          //this code is for search by polygon

         

          _public._kabstateExtent=stateExtent;

         

            map.setExtent(stateExtent);

           

            //constructing Polygon

         //   var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]);

            var symbol1 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID); 

              var _kabpolygon = new esri.geometry.Polygon(_public._kabgraphic.geometry);

           

         /*   var _kabpolygon = {"rings":[[

                                         [xmin=stateExtent.xmin, ymin=stateExtent.ymin],

                                         [xmax=stateExtent.xmax, ymax=stateExtent.ymax],

                                         [xmin=stateExtent.xmin, ymin=stateExtent.ymin],

                                         [xmax=stateExtent.xmax, ymax=stateExtent.ymax]

            ]] "spatialReference":{" wkid":4326}

            };*/

        

            _public._kabpolygon=_kabpolygon;

           alert (_kabpolygon);

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

            var singleRingPolygon = new Polygon(_kabpolygon, symbol1);

            _public._kabsingleRingPolygon=singleRingPolygon;

            var gsvc = null; 

            //constructing points

            var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);

            gsvc = new esri.tasks.GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); 

            var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0");

     _public._kabqueryTaskInside=_kabqueryTaskInside;

     //build query filter

     alert ("here i am1");

     _kabqueryInside = new Query();

     _public._kabqueryInside=_kabqueryInside;

  _kabqueryInside.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;

  _kabqueryInside.geometry = graphic.geometry;

     alert ("here i am2");

     _kabqueryInside.returnGeometry = true;

 

 

    //_kabqueryInside.where = "RYD_MASJID_ID like '%'";

     _kabqueryTaskInside.execute(_kabqueryInside, queryCallback);

     alert ("here i am3");

    

    

    

    

        

      function queryCallback(featureSet) {

      alert(featureSet);

      _public._kabfeatureSet=featureSet;

       var symbol = new esri.symbol.SimpleMarkerSymbol();

       alert("here i am 5");

       symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE; 

       symbol.setSize(8); 

       symbol.setColor(new dojo.Color([255,255,0,0.5])); 

      

       _public._kabsymbol=symbol;

      

       var features = featureSet.features;

       _public._kabfeatures=features;

       dojo.forEach(features, function(feature) {

        feature.setSymbol(symbol);

        console.log(feature);

        _public._kabfeature=feature;

        map.graphics.add(feature); 

       }); 

      } 

    

    

        }

      });

     

     

    </script>

  </head>

  <body class="nihilo">

 

 

  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">

    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

      <span>Draw:<br /></span>

      <button data-dojo-type="dijit/form/Button">Point</button>

      <button data-dojo-type="dijit/form/Button">Multi Point</button>

      <button data-dojo-type="dijit/form/Button">Line</button>

      <button data-dojo-type="dijit/form/Button">Polyline</button>

      <button data-dojo-type="dijit/form/Button">Polygon</button>

      <button data-dojo-type="dijit/form/Button">Freehand Polyline</button>

      <button data-dojo-type="dijit/form/Button">Freehand Polygon</button>

      <!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->

      <button data-dojo-type="dijit/form/Button">Arrow</button>

      <button data-dojo-type="dijit/form/Button">Triangle</button>

      <button data-dojo-type="dijit/form/Button">Circle</button>

      <button data-dojo-type="dijit/form/Button">Ellipse</button>

    </div>

    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>

  </div>

 

 

  </body>

</html>

Outcomes