OpenLayers is an powerful map api to develop map based applications. But to perform complex spatial operations like splitting a polygon, merging two polygons etc., we need to find another way to accomplish these operations. OpenLayers can’t do these operations on its own.
Get the full code at the GitHub repo.
In this tutorial, we are going to develop a Polygon Splitter tool that will split the polygon into two parts by a line.
We will use a JSTS JavaScript library by Björn Harrtell to split the polygon. This JSTS library provides many functions to perform geometrical operations. We will utilize this in OpenLayers to create a Polygon Splitter tool.
JSTS library can be easily integrated with OpenLayers. All you need to do is import the JSTS library using the script tag and we can start using it.
Let’s split the Polygon by a Line. We can access JSTS functionalities using the jsts object. At line number 7 in the below code snippet, we are creating an OpenLayers parser that can parse OpenLayer’s geometry object to the native geometry type of jsts. At line number 9, we are creating an OpenLayers Line geometry from line drawing on the map.
So basically, we need the following two operations to split a polygon by a line:
1. Union of Line and Polygon
2. Polygonization operation that will construct all simple polygons on a set of points genrated from the union of Line and Polygon.
At lines number 15 and 16, we are parsing Polygon and Line to jsts native type.
At line number 19, we are performing a union of Polygon and Line.
At lines number 20 and 23, we are using Polygonizer to split the polygon by a line. The Polygonizer will construct two polygons from the union of polygon and line.
Note: The Polygon and Line should be completely intersected with each other else Polygonizer will return only a single polygon
At line number 26, we are getting splitted polygons from Polygonizer.
That’s it. We have successfully splitted the polygon.
In the rest part of the code i.e. after line number 29, we are providing measurement labels for split polygons and tweaking some styles of feature
It should be noted that we are dynamically splitting the polygon which means that at every geometry change event of the drawn line, we will split the polygon and will also provide the dynamic measurement and styling.
Get the full code at the GitHub repo.
It doesnt work if polygon includes hole(s).
Thanks for the feedback, will create new tutorial on same.
Hello Tom, thanks for the feedback,
I have created a new repo on github which has fixed this bug. The new repo will be able to split polygon with holes. Checkout the link below.
https://github.com/iamgeoknight/OpenLayersPolygonWithHolesSplit
Pingback: Split a Polygon with holes by Line in OpenLayers - Spatial Dev Guru
how to display the coordinates of the 2 polygons that we have cut into two like the example above..thank you
You mean to say displaying coordinates on label/popups the way I am showing for measurements in this example ?
yes
I try to implement this code to my project. I use node_modules and it throws an error like this.
OL3Parser.js:43 Uncaught TypeError: Cannot read properties of undefined (reading ‘Point’)
Row 166 as below:
//Parse Polygon and Line geomtry to jsts type
let b = parser.read(linestring.getGeometry());
let a = parser.read(polygon.getGeometry());