Merge several polygon in Javascript

1227
6
Jump to solution
07-14-2020 05:35 AM
rsharma
Occasional Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
rsharma
Occasional Contributor III

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

View solution in original post

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

rsharma
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Rajni,

   This is better code. See if this helps.

  var updatedGeometry = graphicsLayer.graphics.map(function(gra){
    return webMercatorUtils.webMercatorToGeographic(gra.geometry);
  });
rsharma
Occasional Contributor III

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

0 Kudos