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; } } }

Construct Polygon from JSON

JesseAdams

I'm trying to construct a polygon graphic from a set of coordinates that are returned from a web service as a JSON object. It works very well if the polygon is small and doesn't contain holes. If the polygon that is returned contains holes the polygon draws strange vertices that are incorrect. See the attached image. I've also included the code that constructs the polygon. Any suggestions on how to "clean" a polygon before adding it to a graphics layer? Thank you.

var result:Object = JSON.decode(event.result as String);      var simLineSym:SimpleLineSymbol = new SimpleLineSymbol("solid", 0x000000, 1, 1);     var watSymbol:SimpleFillSymbol = new SimpleFillSymbol("solid", 0x000000, 0.64, simLineSym);      //trace("Watershed Polygon Rings = " + result.watershed.rings.length);     var index:int;     var index2:int;     var ringArray:Array = new Array;          for( index = 0; index < result.watershed.rings.length; index++ )     {      var polyRingsNew:Array = result.watershed.rings[index];      for( index2 = 0; index2 < polyRingsNew.length; index2++ )      {       var testP:MapPoint = new MapPoint(polyRingsNew[index2][0], polyRingsNew[index2][1], map.spatialReference);       ringArray.push(testP);      }     }          var arrayOfRings:Array = new Array;     arrayOfRings.push(ringArray);     waterPoly = new Polygon(arrayOfRings, map.spatialReference);     var newGraphic:Graphic = new Graphic(waterPoly, watSymbol, null);          graphicsLayer.add(newGraphic);

strangeVertices.JPG

Trouver plus de publications taguées avec

Accepted answers

rscheitlin

Jesse,

OK, Scratch what I said earlier... Here is an app that use what you provided me and builds a watershed polygon with inner rings just fine.

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote).
Follow the steps as shown in the below graphic:

Jesse.zip

All comments

JesseAdams

Robert,

That was it! Should have tried out "waterPoly.addRing(pntsArray);" earlier. Thanks a ton I really appreciate it.

rscheitlin

Jesse.zip

rscheitlin

Jesse,

I believe it is more than that if you look at 0, 1, 2, 3 together they are very strange (like one pixel squares and a line connecting them) and the fact that 4 is the main outer ring is going to be difficult to deal with. Normally you would be the main outer ring then any sub other ring (islands) and then all inner rings doughnuts.

JesseAdams

After inspecting each individual ring I see what you mean. The web service returns each hole in the polygon as a separate array of vertices. Now I just need to figure out how to construct a polygon correctly using the format of the returned JSON. Any ideas how to construct this correctly with holes?

rscheitlin

Jesse,

First thing is can you check and see what is going on with the first 3 rings in the JSON. Change your code to draw one specific ring at a time and you will see what I mean.

JesseAdams

Thank you for the response. I added a small bit of code to add the first vertex to the end of the array. Unfortunately that didn't solve the issue. I've attached a 7z file containing a text file with an example JSON polygon. Any advice would be greatly appreciated. Thanks!

for( index = 0; index < result.watershed.rings.length; index++ )
    {
     var polyRingsNew:Array = result.watershed.rings[index];
     for( index2 = 0; index2 < polyRingsNew.length; index2++ )
     {
      if (index2 == 0 && index == 0) {
       var firstP:MapPoint = new MapPoint(polyRingsNew[index2][0], polyRingsNew[index2][1], map.spatialReference);
      }
      var testP:MapPoint = new MapPoint(polyRingsNew[index2][0], polyRingsNew[index2][1], map.spatialReference);
      ringArray.push(testP);
     }
    }
    ringArray.push(firstP);
    var arrayOfRings:Array = new Array;
    arrayOfRings.push(ringArray);
    waterPoly = new Polygon(arrayOfRings, map.spatialReference);
    var newGraphic:Graphic = new Graphic(waterPoly, watSymbol, null);
    
    graphicsLayer.add(newGraphic);

polygonJSON.7z.zip

rscheitlin

Jesse,

I don't know if your JSON has the first point (POB) in the array again as the last point. But if not you need to do this in your code (add the first vertex in the ring again at the end of the ring). If this does not solve the issue than it would help if you provide a text file with an example JSON response.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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