Select to view content in your preferred language

Get each polygon Id!

6414
11
12-15-2014 11:08 PM
ArcGISG_I_S
Deactivated User

Dear All,

I create a prototype which add a group of point to the map and create the drive time polygon around each point (Based on service area sample). The prototype is creating the polygons in the same time but i cannot control each polygon separately, i would like to create an Id for each polygon created around each point so i can use them for other query like polygon intersect ...

Below the code i create if anyone can help i will be grateful:

<!DOCTYPE html>

<html>

<head>

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

  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">

    <!--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>Dispatch Algorithm Implementation</title>

 

  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">

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

  <style>

    body,html,#main{margin:0;padding:0;height:100%;width:100%;}

  </style>

 

  <script>var dojoConfig = { parseOnLoad: true };</script>

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

  <script>

    dojo.require("esri.map"); 

    dojo.require("esri.tasks.servicearea"); 

    dojo.require("dijit.dijit");

    dojo.require("dijit.layout.BorderContainer");

    dojo.require("dijit.layout.ContentPane");

    dojo.require("dijit.form.HorizontalSlider");

    dojo.require("dijit.form.HorizontalRuleLabels");

    dojo.require("dijit.form.HorizontalRule");

  dojo.require("dijit.form.Button");

  dojo.require("esri.graphic");

  dojo.require("esri.tasks.geometry");

  dojo.require("esri.layers.graphics");

  dojo.require("esri.Color");

    var map, serviceAreaTask, params, clickpoint, gsvc;

    function init() {    

      esri.config.defaults.io.proxyUrl = "/proxy";

     

      map = new esri.Map("map", {

        basemap: "streets",

        center: [-122.447, 37.781],

        zoom: 14

      });

      params = new esri.tasks.ServiceAreaParameters();

      params.defaultBreaks= [1];

      params.outSpatialReference = map.spatialReference;

      params.returnFacilities = false;

     

      serviceAreaTask = new esri.tasks.ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");

   gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

           

      dojo.connect(dijit.byId("hslider"), "onChange", updateHorizontalLabel);

      updateHorizontalLabel();

  

    }

    // Create function that updates label when changed

    function updateHorizontalLabel() {

      // Get access to nodes/widgets we need to get/set values

      var hSlider = dijit.byId("hslider");

      var label = dojo.byId("decValue");

      // Update label

      label.innerHTML = hSlider.get("value");

      params.defaultBreaks = [hSlider.value/60];

     // if (typeof clickpoint != 'undefined') {

     //   AddDT(clickpoint);

     // };

    }

  

    //Clears DTP

      function ClearDTP() { 

  map.graphics.clear();

      }

    function AddDTP() {

      map.graphics.clear(); //clear existing graphics 

  

      //define the symbology used to display the results and input point

      var pointSymbol = new esri.symbol.PictureMarkerSymbol({

        "angle":0,

        "xoffset":0,

        "yoffset":10,

        "type":"esriPMS",

        "url":"http://icons.iconarchive.com/icons/aha-soft/standard-transport/256/police-car-icon.png",

        "contentType":"image/png",

        "width":30,

        "height":30

      });

    var m_mapPoint = [];

  m_mapPoint[1] = new esri.geometry.Point([-122.447, 37.781],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[2] = new esri.geometry.Point([-122.457, 37.791],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[3] = new esri.geometry.Point([-122.450, 37.785],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[4] = new esri.geometry.Point([-122.452, 37.775],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[5] = new esri.geometry.Point([-122.452, 37.791],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[6] = new esri.geometry.Point([-122.450, 37.777],new esri.SpatialReference({ wkid:4326 }));

      var location1 = new esri.Graphic(m_mapPoint[1],pointSymbol);

   var location2 = new esri.Graphic(m_mapPoint[2],pointSymbol);

   var location3 = new esri.Graphic(m_mapPoint[3],pointSymbol);

   var location4 = new esri.Graphic(m_mapPoint[4],pointSymbol);

   var location5 = new esri.Graphic(m_mapPoint[5],pointSymbol);

   var location6 = new esri.Graphic(m_mapPoint[6],pointSymbol);

      map.graphics.add(location1);

   map.graphics.add(location2);

   map.graphics.add(location3);

   map.graphics.add(location4);

   map.graphics.add(location5);

   map.graphics.add(location6);

  

      var features = [];

      features.push(location1);

   features.push(location2);

   features.push(location3);

   features.push(location4);

   features.push(location5);

   features.push(location6);

  

      var facilities = new esri.tasks.FeatureSet();

      facilities.features = features;

      params.facilities = facilities;

      //solve

      serviceAreaTask.solve(params,function(solveResult){

        var result = solveResult;

        var serviceAreaSymbol = new esri.symbol.SimpleFillSymbol(

          esri.symbol.SimpleFillSymbol.STYLE_SOLID, 

          new esri.symbol.SimpleLineSymbol(

            esri.symbol.SimpleLineSymbol.STYLE_SOLID,

            new dojo.Color([232,104,80]), 2

          ),

          new dojo.Color([232,104,80,0.25])

        );

        var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

              new dojo.Color([232,104,80]), 2),new dojo.Color([232,104,80,0.25]));

        dojo.forEach(solveResult.serviceAreaPolygons, function(serviceArea){

          serviceArea.setSymbol(polygonSymbol);

          map.graphics.add(serviceArea);

        });

       

      },function(err){

        console.log(err.message);

      });

    }    

    dojo.ready(init);

  </script>

</head>

<body class="claro">

  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">

    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">

      <b>Choose your threshold to find the appropriate dispatch:</b>

      <div style="width: 360px; margin: 10px">

        <!-- create rules and labels above horizontal slider -->

        <ol data-dojo-type="dijit.form.HorizontalRuleLabels"

          data-dojo-props="

            container: 'topDecoration',

            style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">

          <li>0</li>

          <li>0:20</li>

          <li>0:40</li>

          <li>1:00</li>

          <li>1:20</li>

   <li>1:40</li>

   <li>2:00</li>

        </ol>

        <div data-dojo-type="dijit.form.HorizontalRule"

          data-dojo-props="

            container: 'topDecoration',

            count: 7,

            style: 'height: 5px; margin: 0 12px;'">

        </div>

        <input id="hslider" value="60" type="range"

          data-dojo-type="dijit.form.HorizontalSlider"

          data-dojo-props="

            minimum: 0,

            maximum: 120,

            showButtons: false,

            discreteValues: 25">

        <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> Seconds</div>

  <br><br>

  <label class="form_col" for="NumberPC">Please Enter a Number of Patrol Car:</label>

        <input name="NumberPC" id="NumberPC" type="text" size="10" />

  <br><br>

  <label class="form_col" for="zone">Zone :</label>

      <select name="zone" id="zone">

        <option value="none">Select your zone</option>

        <option value="z1">zone 1</option>

        <option value="z2">zone 2</option>

        <option value="z3">zone 3</option>

      </select>

  

  <br><br>

  <button onclick="AddDTP();">Dispatch</button>

  <button onclick="ClearDTP();">Clear Dispatch</button>

      </div>

    </div>

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

  </div>

</body>

</html>

Thanks a lot for your support.

0 Kudos
11 Replies
ArcGISG_I_S
Deactivated User

Dear Owen,

Thanks for your replay, i hope you spend an amazing holiday

Actually the objective from having the polygon ID is to have control on it and delete some polygons when we have intersection.

Below the steps regarding the scenario.

Scenario:

- Keep the first one.

- Check the second one if intersect delete the second if not keep it.

- Check the third one if intersect delete if not keep it.

- ...

I update the Javascript code using service network area for arcgis online that you can test the result (Working but not deleting the intersection) the problem is i don't know how to check the intersection and deleted from the list.

I am using ESRI services you can run the application in your computer in order to check.

The part regarding the intersection is mentioned in a commentaire.

Below the code:

<!DOCTYPE html>

<html>

<head>

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

  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">

    <!--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>Dispatch Algorithm Implementation</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">

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

  <style>

    body,html,#main{margin:0;padding:0;height:100%;width:100%;}

  </style>

  <script>var dojoConfig = { parseOnLoad: true };</script>

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

  <script>

    dojo.require("esri.map");

    dojo.require("esri.tasks.servicearea");

    dojo.require("dijit.dijit");

    dojo.require("dijit.layout.BorderContainer");

    dojo.require("dijit.layout.ContentPane");

    dojo.require("dijit.form.HorizontalSlider");

    dojo.require("dijit.form.HorizontalRuleLabels");

    dojo.require("dijit.form.HorizontalRule");

  dojo.require("dijit.form.Button");

  dojo.require("esri.graphic");

  dojo.require("esri.tasks.geometry");

  dojo.require("esri.layers.graphics");

  dojo.require("esri.Color");

    var map, serviceAreaTask, params, clickpoint, gsvc;

    function init() {   

      esri.config.defaults.io.proxyUrl = "/proxy";

    

      map = new esri.Map("map", {

        basemap: "streets",

        center: [-122.447, 37.781],

        zoom: 14

      });

      params = new esri.tasks.ServiceAreaParameters();

      params.defaultBreaks= [1];

      params.outSpatialReference = map.spatialReference;

      params.returnFacilities = true;

    

      serviceAreaTask = new esri.tasks.ServiceAreaTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Network/USA/NAServer/Service Area");

   gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

          

      dojo.connect(dijit.byId("hslider"), "onChange", updateHorizontalLabel);

      updateHorizontalLabel();

 

    }

    // Create function that updates label when changed

    function updateHorizontalLabel() {

      // Get access to nodes/widgets we need to get/set values

      var hSlider = dijit.byId("hslider");

      var label = dojo.byId("decValue");

      // Update label

      label.innerHTML = hSlider.get("value");

      params.defaultBreaks = [hSlider.value/60];

     // if (typeof clickpoint != 'undefined') {

     //   AddDT(clickpoint);

     // };

    }

 

    //Clears DTP

      function ClearDTP() {

  map.graphics.clear();

      }

    function AddDTP() {

      map.graphics.clear(); //clear existing graphics

 

      //define the symbology used to display the results and input point

      var pointSymbol = new esri.symbol.PictureMarkerSymbol({

        "angle":0,

        "xoffset":0,

        "yoffset":10,

        "type":"esriPMS",

        "url":"http://icons.iconarchive.com/icons/aha-soft/standard-transport/256/police-car-icon.png",

        "contentType":"image/png",

        "width":30,

        "height":30

      });

    var m_mapPoint = [];

  m_mapPoint[1] = new esri.geometry.Point([-122.447, 37.781],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[2] = new esri.geometry.Point([-122.457, 37.791],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[3] = new esri.geometry.Point([-122.450, 37.785],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[4] = new esri.geometry.Point([-122.452, 37.775],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[5] = new esri.geometry.Point([-122.452, 37.791],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[6] = new esri.geometry.Point([-122.450, 37.777],new esri.SpatialReference({ wkid:4326 }));

  m_mapPoint[7] = new esri.geometry.Point([-122.470, 37.777],new esri.SpatialReference({ wkid:4326 }));

      var location1 = new esri.Graphic(m_mapPoint[1],pointSymbol);

   var location2 = new esri.Graphic(m_mapPoint[2],pointSymbol);

   var location3 = new esri.Graphic(m_mapPoint[3],pointSymbol);

   var location4 = new esri.Graphic(m_mapPoint[4],pointSymbol);

   var location5 = new esri.Graphic(m_mapPoint[5],pointSymbol);

   var location6 = new esri.Graphic(m_mapPoint[6],pointSymbol);

   var location7 = new esri.Graphic(m_mapPoint[7],pointSymbol);

      map.graphics.add(location1);

   map.graphics.add(location2);

   map.graphics.add(location3);

   map.graphics.add(location4);

   map.graphics.add(location5);

   map.graphics.add(location6);

   map.graphics.add(location7);

 

      var features = [];

      features.push(location1);

   features.push(location2);

   features.push(location3);

   features.push(location4);

   features.push(location5);

   features.push(location6);

   features.push(location7);

 

      var facilities = new esri.tasks.FeatureSet();

      facilities.features = features;

      params.facilities = facilities;

      //solve

      serviceAreaTask.solve(params,function(solveResult){

        var result = solveResult;

        var serviceAreaSymbol = new esri.symbol.SimpleFillSymbol(

          esri.symbol.SimpleFillSymbol.STYLE_SOLID,

          new esri.symbol.SimpleLineSymbol(

            esri.symbol.SimpleLineSymbol.STYLE_SOLID,

            new dojo.Color([232,104,80]), 2

          ),

          new dojo.Color([232,104,80,0.25])

        );

        var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID,  new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,

              new dojo.Color([232,104,80]), 2),new dojo.Color([232,104,80,0.25]));

  var polys = solveResult.serviceAreaPolygons;

  var index=0;

  // Filters all the polygons that intersect each other

  filterIntersections(polys, index);

  // Put the remaining polygons on the map

  dojo.forEach(polys, function(poly){

  poly.setSymbol(polygonSymbol);

  map.graphics.add(poly);

  });

       

      }, function(err){

        console.log(err.message);

      });

    }

  function filterIntersections(polys, index)

  {

  var polysIntersect = [];

  for (var j=index+1; j<polys.length; j++)

  {

  polysIntersect.push(polys.geometry);

  }

  if(polysIntersect.length == 0)

  {

  // End of filtering

  return;

  }

  // Call intersect service

  gsvc.intersect(polysIntersect, polys[index].geometry, function(obj){

  console.log(obj);

  /**************************************

Delete from polys list all polygons that intersect with polys[index]

when we delete a polygon from polys -> index--;

this part here i don't know how to do ??

  ***************************************/

  // Next polygon

  index++;

  filterIntersections(polys, index);

  }, function(err){

  console.log(err.message);

      });

  }

    dojo.ready(init);

  </script>

</head>

<body class="claro">

  <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;margin:0px;">

    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'">

      <b>Choose your threshold to find the appropriate dispatch:</b>

      <div style="width: 360px; margin: 10px">

        <!-- create rules and labels above horizontal slider -->

        <ol data-dojo-type="dijit.form.HorizontalRuleLabels"

          data-dojo-props="

            container: 'topDecoration',

            style: 'height: 1.2em; font-weight: bold; margin: 0 12px;'">

          <li>0</li>

          <li>0:20</li>

          <li>0:40</li>

          <li>1:00</li>

          <li>1:20</li>

   <li>1:40</li>

   <li>2:00</li>

        </ol>

        <div data-dojo-type="dijit.form.HorizontalRule"

          data-dojo-props="

            container: 'topDecoration',

            count: 7,

            style: 'height: 5px; margin: 0 12px;'">

        </div>

        <input id="hslider" value="60" type="range"

          data-dojo-type="dijit.form.HorizontalSlider"

          data-dojo-props="

            minimum: 0,

            maximum: 120,

            showButtons: false,

            discreteValues: 25">

        <div style="padding-top: 10px; text-align: center;">Travel time: <strong id="decValue"></strong> Seconds</div>

  <br><br>

  <label class="form_col" for="NumberPC">Please Enter a Number of Patrol Car:</label>

        <input name="NumberPC" id="NumberPC" type="text" size="10" />

  <br><br>

  <label class="form_col" for="zone">Zone :</label>

      <select name="zone" id="zone">

        <option value="none">Select your zone</option>

        <option value="z1">zone 1</option>

        <option value="z2">zone 2</option>

        <option value="z3">zone 3</option>

      </select>

 

  <br><br>

  <button onclick="AddDTP();">Dispatch</button>

  <button onclick="ClearDTP();">Clear Dispatch</button>

      </div>

    </div>

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

  </div>

</body>

</html>

Thanks a lot.

0 Kudos
ArcGISG_I_S
Deactivated User

Dear Mr Owen,

Any solution regarding this problem?

Thanks in advance.

0 Kudos