JSTS

JSTS union example

by _DR_

HTML

<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src="https://raw.github.com/bjornharrtell/jsts/master/lib/javascript.util.js"></script>
<script src="https://raw.github.com/bjornharrtell/jsts/master/lib/jsts.js"></script>
<div id='map'></div>

CSS

#map {
    width: 500px;
    height: 500px;
    border: 1px solid #dddddd;
}

JavaScript

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

//a = parser.write(a);
//b = parser.write(b);
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();