Select to view content in your preferred language

Delete Polygon Intersection!!

4916
5
12-30-2014 10:33 PM
ArcGISG_I_S
New Contributor

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.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>

0 Kudos
5 Replies
JoshHevenor
Occasional Contributor II

A couple things - first,  I haven't worked with the ServiceArea task but there is a OverlapPolygons parameter that may solve this for you:

ServiceAreaParameters | API Reference | ArcGIS API for JavaScript

Second,  if you delete these polygons won't you end up with gaps in your service areas?  Since you have the intersections you can use the geometryservice.difference  function to clip your target (aka polys[index])  to remove the overlaps from its geometry.

0 Kudos
ArcGISG_I_S
New Contributor

Dear Josh,

Thanks a lot for your replay and your help.

Regarding the second proposition, it's not a problem for our solution the objective is to delete the polygon if it intersect with another one.

The only part that i believe is messing is when i mentioned in the code :

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

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

That part i really don't know how to do it, the code i gave can be run in your machine in order to test (I am using ArcGIS Online services from ESRI)

Your support is very helpful

Thanks you very much.

0 Kudos
JoshHevenor
Occasional Contributor II

This might apply: javascript - Looping through array and removing items, without breaking for loop - Stack Overflow 

So, start your loop at the end and work to the start. Delete you're target (polys[index]) if there are overlaps and not each overlap since they may be distinct once your target is removed. This should remove the fewest polygons. 

var i = polys.length

while (i--) {

     // . . .

}

It looks like you've already considered that the intersect call is asyncronous since you're passing the index in to your function.

0 Kudos
ArcGISG_I_S
New Contributor

Dear Josh,

Thank you very very very very very much, you support is very helpful.

After looking at the link you send me i think this could be the solution, i didn't know how to move from the existing code to the one you gave me.

If you can help me i will be very grateful to you.

You can test the code i'am using esri services

Thank you a lot in advance.

0 Kudos
ArcGISG_I_S
New Contributor

Dear Josh,

I hope everything is ok, did you find any solution regarding the issue?

Thanks in advance.

0 Kudos