[GIS] How to merge two Polygons in OpenLayers

openlayers-2polygon

I have two polygons.

polygon1 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing1]))
polygon2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing2]))

How can I merge the two polygons into one using OpenLayers?

http://i.stack.imgur.com/SrqYF.png

Best Answer

For geometry manipulation on client side you can use JSTS Topology Suite. Here is my little example of solving your problem: Union example. Source code:

var reader = new jsts.io.WKTReader();  

var a = reader.read('POLYGON((10 10, 100 10, 100 100, 10 100, 10 10))');
var b = reader.read('POLYGON((50 50, 200 50, 200 200, 50 200, 50 50))');

var union = a.union(b);

var parser = new jsts.io.OpenLayersParser();

union = parser.write(union);

var map = new OpenLayers.Map('map', {
  maxExtent: new OpenLayers.Bounds(0, 0, 300, 300),
  maxResolution: 100,
  units: 'm',
 controls: [new OpenLayers.Control.MousePosition(), new OpenLayers.Control.Navigation()]
});

var layer = new OpenLayers.Layer.Vector('test', {isBaseLayer: true});
map.addLayer(layer);

var unionOutput = new OpenLayers.Feature.Vector(union, null, { fillColor: 'green', fillOpacity: 1});

layer.addFeatures([unionOutput ]);
map.zoomToMaxExtent();
Related Question