Divide a polygon in to smaller polygons using JavaScript

Question

I'm having a polygon data

{
    "coordinates": [
        [
            [
                76.878324056172,
                8.58553370915678
            ],
            [
                76.8928294425245,
                8.58273302582363
            ],
            [
                76.8969493155714,
                8.57161495793276
            ],
            [
                76.8872504477736,
                8.5530275382391
            ],
            [
                76.8612437491652,
                8.55149976475282
            ],
            [
                76.8612437491652,
                8.56720158888965
            ],
            [
                76.8615012412306,
                8.57976258152831
            ],
            [
                76.878324056172,
                8.58553370915678
            ]
        ]
    ],
    "type": "Polygon"
}

I need to split/divide this polygon into smaller/equal polygons. And it should return another set of polygons with coordinates.

Does anyone can help me to find a solution for this in JavaScript?

Answer 1

JSTS library can also be used to cut/split polygons with a multi-point line in JavaScript. Here is an example that worked for me.

Copied code from the link:

// Output:
// POLYGON((1 1,1 5,9 5,9 1,1 1))
// POLYGON((1 5,1 9,9 9,9 5,1 5))

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

var a = reader.read('POLYGON ((1 1, 1 9, 9 9, 9 1, 1 1))');
var b = reader.read('LINESTRING (0.5 5, 9.6 5, 9.6 3.9)');
var union = a.getExteriorRing().union(b);

var polygonizer = new jsts.operation.polygonize.Polygonizer();
polygonizer.add(union);

var polygons = polygonizer.getPolygons();
for (var i = polygons.iterator(); i.hasNext();) {
    var polygon = i.next();
    console.log(writer.write(polygon));
}

Answer 2

You can use Turf.js or JSTS for splitting a polygon into smaller ones. It might be useful to store your polygon in the GeoJSON format, because that is the format that the upper libraries understand.

Answer 3

https://github.com/mapbox/earcut earcut is a javascript library to deal with polygon.

after install earcut:

npm install earcut

You will be able to implement a function similar to this:

function splitPolygonIntoEqualPolygons(polygonData, numberOfPolygons) {
  const { coordinates } = polygonData;
  
  // Flatten the coordinates array into a single list of [lon, lat] pairs
  const flatCoordinates = coordinates[0].map(([lon, lat]) => [lon, lat]).flat();

  // Use 'earcut' to triangulate the polygon
  const triangles = earcut(flatCoordinates);

  // Create smaller polygons based on the number of required polygons
  const verticesPerPolygon = triangles.length / 3 / numberOfPolygons;
  const smallerPolygons = [];

  for (let i = 0; i < numberOfPolygons; i++) {
    const startIndex = i * verticesPerPolygon * 2;
    const endIndex = (i + 1) * verticesPerPolygon * 2;
    const vertices = triangles.slice(startIndex, endIndex);
    const polygonCoordinates = vertices.map((vertexIndex) => [
      flatCoordinates[vertexIndex * 2],
      flatCoordinates[vertexIndex * 2 + 1],
    ]);

    // Close the polygon by adding the first vertex at the end
    polygonCoordinates.push(polygonCoordinates[0]);

    smallerPolygons.push({
      type: 'Polygon',
      coordinates: [polygonCoordinates],
    });
  }

  return smallerPolygons;
}

When you call this function just pass your polygon data and the number of polygon you expect