topic Re: Merge several polygon in Javascript in ArcGIS JavaScript Maps SDK Questions

Merge several polygon in Javascript

rsharma — Tue, 14 Jul 2020 12:35:25 GMT

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

Re: Merge several polygon in Javascript

RobertScheitlin__GISP — Tue, 14 Jul 2020 12:39:05 GMT

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

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

Re: Merge several polygon in Javascript

rsharma — Tue, 14 Jul 2020 12:52:19 GMT

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

Re: Merge several polygon in Javascript

RobertScheitlin__GISP — Tue, 14 Jul 2020 13:00:38 GMT

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

Re: Merge several polygon in Javascript

rsharma — Tue, 14 Jul 2020 13:22:32 GMT

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

Re: Merge several polygon in Javascript

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:10:36 GMT

Rajni,

This is better code. See if this helps.

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

Re: Merge several polygon in Javascript

rsharma — Wed, 15 Jul 2020 11:35:24 GMT

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