Merge several polygon in Javascript

[rsharma]

I want to merge random polygons placed on a graphics layer make a single polygon with only one boundary. Also how to unmerge them.

[RobertScheitlin__GISP]

Merge/Union: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-geometryEngine.html#unio... 

To un-merge you loop though the Polygons rings and copy those ring arrays to another Polygon class.

[rsharma]

hi robert,

long time to hear from your side... how are you, well thanks for the reply, i already get the union link, but couldn't find any example,  if u have any link then pls send..

like i have found this 

Merge Polygons in JavaScript API 4.14 

Do, i need to to loop through all the polygons of a layer, to get its graphics geomtrry

[RobertScheitlin__GISP]

Correct. The Union works with the actual geometry not the layer.

[rsharma]

jQuery('#main').on('click','.merge_boundary',function(){
var updatedGeometry=new Array();
graphicsLayer.graphics.map(function(gra){
updatedGeometry.push(webMercatorUtils.webMercatorToGeographic(gra.geometry));
});
var joinedPolygons = geometryEngine.union(updatedGeometry);//it returned all  polygons as it is, do not merge to make it one
console.log(joinedPolygons.rings);
addGraphics(joinedPolygons.rings);
});

[RobertScheitlin__GISP]

Rajni,

   This is better code. See if this helps.

  var updatedGeometry = graphicsLayer.graphics.map(function(gra){
    return webMercatorUtils.webMercatorToGeographic(gra.geometry);
  });‍‍‍

[rsharma · Accepted solution]

I think this function works for only intersected boundaries: i used the solution below, and it is working fine.

merge.addEventListener('click',function(){
var updatedGeometry=new Array();
graphicsLayer.graphics.map(function(gra){
updatedGeometry.push(new Polygon((gra.geometry)));
});

var joinedPolygons = geometryEngine.union(updatedGeometry);
graphicsLayer.removeAll();
joinedPolygons.rings.forEach(function(ring)
{
resultpolygon={type:"polygon",rings:[ring]};
var resultgraphic =new Graphic({
geometry: resultpolygon,
symbol: resultsymbol
});

graphicsLayer.add(resultgraphic);
// console.log(ring);
});
});