Calculate area of a polygon using longitude and latitude using javascript

Question

The approach I've been working on is implementing a sinusoidal projection to get x,y coordinates and then use a function to calculate the area of an irregular polygon in a plane. Below is the code I've been working on (the points variable is an array of Cesium Cartesian points that is defined elsewhere in the program).

https://stackoverflow.com/a/4682656/7924630 This was a very useful answer that helped me work on this

function polygonArea(X, Y, numPoints) {
  let area = 0;         // Accumulates area in the loop
  let j = numPoints-1;  // The last vertex is the 'previous' one to the first

  for (i=0; i<numPoints; i++) {
    area = area +  (X[j]+X[i]) * (Y[j]-Y[i]);
    j = i;  //j is previous vertex to i
  }
  return area/2;
}


let xpoints = [];
let ypoints = [];
let lat_dist = (6371009 * Math.PI) / 180;
var i;
for (i = 0; i < points.length; i++) {
    let cartoPoint = Cesium.Cartographic.fromCartesian(points[i]);
    let lng = cartoPoint.longitude;
    let lat = cartoPoint.latitude;
    xpoints[i] = lng * lat_dist * Math.cos(lat);
    ypoints[i] = lat * lat_dist;
};
surfaceArea = polygonArea(xpoints, ypoints, xpoints.length);

For some reason this is returning really small values for the area and I can't understand why. For example, I tested this on a rectangle area. The area should be approximately 45m², but it's returning 0.0137m². I've tried following other implementations of this, but haven't been able to find anything useful for native Javascript.

Answer 1

You can use Spherical Geometry Library This library ports a small but useful subset of classes from the Google Maps Javascript API

How to use

Install library

npm install spherical-geometry-js

include library in your code

import { computeArea ,LatLng} from 'spherical-geometry-js/src/index';

import computeArea,LatLng

import { computeArea ,LatLng} from 'spherical-geometry-js/src/index';

Compute the area by passing coordinate array

  getArea(){
     var coords = [
        { lat: 12.963340185241163, lng: 77.59504217857734 },
        { lat: 12.963959666837907, lng: 77.5952513908759 },
        { lat: 12.96387994460954, lng: 77.59548340195072 },
        { lat: 12.963263076659977, lng: 77.59528357738415 }
     ];

     //convert coords to latlng
     var latLngs = coords.map(function(coord) { 
        return new LatLng(coord.lat, coord.lng);
     });


    return computeArea(latLngs)  //return the area 

   }

Answer 2

You are using shoelace formula for polygon area, here it gives approximation for spherical polygon. Add Math/abs in the end to get result independently on traversal direction and beware of coordinate sign change at equator and 0th meridian.

But calculations are incorrect due to this issue:

Cesium.Cartographic.fromCartesian function returns result coordinates in radians

while you treat them as degrees (quick check: 45/(57*57)=0.0138 ).

So it is enough to make correction:

 let lat_dist = 6371009;