AnsweredAssumed Answered

Delete Polygon Intersection!!

Question asked by ilyass on Dec 30, 2014
Latest reply on Jan 19, 2015 by ilyass

Hi All,

 

The objective is to create a code that allow me to delete polygons if they intersect.

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 create a code in Javascript 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 if someone can help i will be very greatful.

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[j].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>

Outcomes