How to calculate the area of ​​a rectangle on a map?

Question

JavaScript

Colleagues good time of the day. Some lyrics:
There is an application with a map. Map made on Leaflet. There is a case on the map, draw a polygon and get its data. So, the polygon is drawn using leaflet.editable. Everything is fine, but then it turns out some kind of dregs. You need to get the area of ​​a given rectangle, here is the code:

polygonSize(polygon) { 

        return new Promise((resolve, reject) => {

            let coords = polygon.getBounds();
            let data = {};

            data.conners = {

                ne: [coords._northEast.lat, coords._northEast.lng], // северо-восток
                sw: [coords._southWest.lat, coords._southWest.lng], // юго-запад
                nw: [coords._northEast.lat, coords._southWest.lng], // северо-запад
                se: [coords._southWest.lat, coords._northEast.lng] // юго-восток

            };

            let points = {

                sw: new L.LatLng(data.conners.sw[0], data.conners.sw[1]), // юго-запад
                se: new L.LatLng(data.conners.se[0], data.conners.se[1]), // юго-восток
                ne: new L.LatLng(data.conners.ne[0], data.conners.ne[1]) // серверо-восток

            };

            data.width = +(points.sw.distanceTo(points.se)).toFixed(0);
            data.height = +(points.se.distanceTo(points.ne)).toFixed(0);

            resolve(data);

        });

    }

I think everyone knows the area formula (width * height). To get the width and height, I take three points of the rectangle (southwest, southeast and northeast) and get the distance between them (see code above), this is done by the standard method leaflet -> point.distanceTo(point2); everything seems to be logical. Questions begin when I start to move the given rectangle on the map. Each time the area changes. Not by much, but still.
The question is, does anyone have any idea why this is happening? Thank you in advance

Answer 1

Because the map is a projection of the Earth's surface, which is not flat, and therefore the area of ​​a real figure on this surface will be different for different values ​​of the central latitude of the same figure on the map.
https://en.m.wikipedia.org/wiki/Tissot%27s_indicatrix
Also, if the figure is large enough, then the length of the top and bottom side will be different, so your way of calculating is rough and approximate. If you need to be more precise, then you need to use other methods (if necessary, I can explain which ones).