Skip to content

Instantly share code, notes, and snippets.

@pgiraud

pgiraud/README.md

Last active November 25, 2022 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pgiraud/2ed05b0a9e394c5652b3 to your computer and use it in GitHub Desktop.
Save pgiraud/2ed05b0a9e394c5652b3 to your computer and use it in GitHub Desktop.
Download ZIP
Polygon intersection with JSTS
Raw
README.md

This example shows the usage of JSTS to compute the intersection of polygons.

Once the vector layer shows up, you can draw a polygon on the map. Within a small amount of time, you should see the result of intersection highlighted in blue.

Link to demo

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Select features example</title>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol-debug.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
html, body, .map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
var swissProjection = new ol.proj.Projection({
code: 'EPSG:21781',
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
units: 'm'
});
ol.proj.addProjection(swissProjection);
var geojsonFormat = new ol.format.GeoJSON();
var style = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 120, 0, 0.6)',
width: 1
})
});
var styles = [style];
var highlightStyle = [
new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 120, 0, 0.3)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 120, 0, 0.6)',
width: 1
})
})
];
var vector2 = new ol.layer.Vector({
maxResolution: 0.8,
source: new ol.source.Vector({
url: 'intersect_BBK_Sicherheit_253_Dissolved.geojson',
format: new ol.format.GeoJSON({
defaultDataProjection: swissProjection
})
}),
style: styles
});
var intersectionLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var map = new ol.Map({
layers: [vector2, intersectionLayer],
target: 'map',
view: new ol.View({
projection: swissProjection,
center: [642239, 264010],
zoom: 12
})
});
var draw = new ol.interaction.Draw({
type: 'Polygon'
});
map.addInteraction(draw);
draw.on('drawstart', function(evt) {
intersectionLayer.getSource().clear();
});
var olParser = new jsts.io.olParser();
var geojsonParser = new jsts.io.GeoJSONParser();
draw.on('drawend', function(evt) {
var poly1 = olParser.read(evt.feature.getGeometry());
var extent1 = evt.feature.getGeometry().getExtent();
var source = vector2.getSource();
var features = source.getFeatures();
var start = Date.now();
features.forEach(function(feature) {
if (!ol.extent.intersects(extent1, feature.getGeometry().getExtent())) {
return;
}
var poly2 = olParser.read(feature.getGeometry());
var intersection = poly1.intersection(poly2);
intersection = geojsonParser.write(intersection);
if(intersection.type === 'GeometryCollection' && intersection.geometries.length === 0) {
return;
} else {
intersectionLayer.getSource().addFeature(geojsonFormat.readFeature({
type: 'Feature',
properties: {},
geometry: intersection
}));
}
});
var end = Date.now();
console.log (end - start);
});
Display the source blob
Display the rendered blob
Raw
intersect_BBK_Sicherheit_253_Dissolved.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@sierraodcpvtltd
Copy link

Hi,

I tried this https://stackoverflow.com/questions/24504068/how-to-show-the-intersecting-area-of-two-polygons-on-google-maps

If I alert this alert(intersection.getCoordinates());

Getting following and this has undefined value also
(25.774, -65.40012284373873, undefined),(32.321, -64.757, undefined),(25.774, -80.19, undefined),(25.774, -65.40012284373873, undefined)

Also

  1. How can we check can we check like 'if (intersection )' after 'intersection = bermudaPolygon.intersection(anotherPolygon)'. I tried this returned 'undefined'
  2. Can we check if there is intersection between polygons without plotting

Please help

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment