javascript - How to calculate intersection area in Google Maps API with JSTS Library?

Question

I am trying to calculate the area of the intersection between two triangles. I found out the JSTS Topology Suite has a Geometry class which a method intersection(). I tried it on JSFiddle and on my local computer but i am getting an Uncaught TypeError: undefined is not a function. There is also an example from JSTS. Here you can see the code. My code looks the same in JSFiddle:

var union = triangleCoords.union(secondTriangleCoords);
var intersection = triangleCoords.intersection(secondTriangleCoords);
console.log('Intersection ' + intersection);
google.maps.geometry.spherical.computeArea(intersection);

Is there a conversion that i should do also?

Answer 1

The general answer is you need to convert the google.maps.Polygon objects into jsts.geom.Geometry objects, then run the union. If you want to display the result on a Google Maps Javascript API v3 map, then you need to convert the returned jsts.geom.Geometry object back into a google.maps.Polygon.

This code (from this question) converts a path into a jstsPolygon:

var coordinates = googleMaps2JTS(googlePolygonPath);
var geometryFactory = new jsts.geom.GeometryFactory();
var shell = geometryFactory.createLinearRing(coordinates);
var jstsPolygon = geometryFactory.createPolygon(shell);

Something like this:

var geometryFactory = new jsts.geom.GeometryFactory();

var trito = bermudaTriangle.getPath();
var tritoCoor = googleMaps2JTS(trito);
var shell = geometryFactory.createLinearRing(tritoCoor);

var trito2 = secondBermuda.getPath();
var tritoCoor2 = googleMaps2JTS(trito2);
var shell2 = geometryFactory.createLinearRing(tritoCoor2);

var jstsPolygon = geometryFactory.createPolygon(shell);
var jstsPolygon2 = geometryFactory.createPolygon(shell2);

var intersection = jstsPolygon.intersection(jstsPolygon2);

jsfiddle

To use the computeArea method on the result, though, you need to convert it back into an array or an MVCArray of google.maps.LatLng objects (computeArea(path:Array.|MVCArray., radius?:number))

Or you could use the [jsts.geom.Polygon.getArea] (http://bjornharrtell.github.io/jsts/doc/api/symbols/jsts.geom.Polygon.html#getArea) method.

working fiddle with area of triangles, union and intersection using the jsts method.

Code to convert the results back to google.maps.LatLng and google.maps.Polygon objects:

var jsts2googleMaps = function (geometry) {
  var coordArray = geometry.getCoordinates();
  GMcoords = [];
  for (var i = 0; i < coordArray.length; i++) {
    GMcoords.push(new google.maps.LatLng(coordArray[i].x, coordArray[i].y));
  }
  return GMcoords;
}

var intersectionGMArray = jsts2googleMaps(intersection);

Then to get the area:

var intersectionGMarea = google.maps.geometry.spherical.computeArea(intersectionGMArray);

working fiddle