OpenLayers 3: How to calculate distance between 2

Question

Using OpenLayers 3, how can I determine the distance between two points in the Spherical Mercator (SRID: 3857) projection?

I know that distanceTo was used in OpenLayers 2

point1.distanceTo(point2)

I looked through the OpenLayers 3 docs, but I'm not finding anything similar...

Answer 1

I'm using a fairly simple solution. I instanciate a ol.geom.LineString object between the two points and calculate the length of the line:

        this.distanceBetweenPoints = function(latlng1, latlng2){
            var line = new ol.geom.LineString([latlng1, latlng2]);
            return Math.round(line.getLength() * 100) / 100;
        };

You can then get a readable value using some formating:

        this.formatDistance = function(length) {
            if (length >= 1000) {
                length = (Math.round(length / 1000 * 100) / 100) +
                ' ' + 'km';
            } else {
                length = Math.round(length) +
                ' ' + 'm';
            }
            return length;
        }

EDIT: New method of calcul

Actualy, the distance can be false regarding the projection that you use. We had a fairly long discussion about this on ol3's github, you can see it there: https://github.com/openlayers/ol3/issues/3533

To summarize, you need to use that function in order to get exact calcul:

/**
 * format length output
 * @param {ol.geom.LineString} line
 * @return {string}
 */
export default function mapFormatLength(projection, line) {
  var length;
  var coordinates = line.getCoordinates();
  length = 0;
  for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
    var c1 = ol.proj.transform(coordinates[i], projection, 'EPSG:4326');
    var c2 = ol.proj.transform(coordinates[i + 1], projection, 'EPSG:4326');
    length += mapConst.wgs84Sphere.haversineDistance(c1, c2);
  }
  var output;
  if (length > 1000) {
    output = (Math.round(length / 1000 * 100) / 100) +
    ' ' + 'km';
  } else {
    output = (Math.round(length * 100) / 100) +
    ' ' + 'm';
  }
  return output;
}

Answer 2

I wrote this one for myself I hop it'll be useful, It return distance in metters:

function getCoordsDistance(firstPoint, secondPoint, projection) {
    projection = projection || 'EPSG:4326';

    length = 0;
    var sourceProj = mapObj.getView().getProjection();
    var c1 = ol.proj.transform(firstPoint, sourceProj, projection);
    var c2 = ol.proj.transform(secondPoint, sourceProj, projection);

    var wgs84Sphere = new ol.Sphere(6378137);
    length += wgs84Sphere.haversineDistance(c1, c2);

    return length;
}

Answer 3

function getCoordsDistance(latlng1, latlng2) {

    var markers = [];

    markers.push(ol.proj.transform(latlng1, 'EPSG:4326', map.getView().getProjection()));
    markers.push(ol.proj.transform(latlng2, 'EPSG:4326', map.getView().getProjection()));

    var line = new ol.geom.LineString(markers, 'XY');
    var length = Math.round(line.getLength() * 100) / 100;

    if (length >= 1000) {
        length = (Math.round(length / 1000 * 100) / 100) +
            ' ' + 'km';
    } else {
        length = Math.round(length) +
            ' ' + 'm';
    }
    return length;
}

Answer 4

Just to add one more option. This is not ol3 dependent.

function toRad(x) {return x * Math.PI / 180;}

function SphericalCosinus(lat1, lon1, lat2, lon2) {

    var R = 6371; // km
    var dLon = toRad(lon2 - lon1),
        lat1 = toRad(lat1),
        lat2 = toRad(lat2),
        d = Math.acos(Math.sin(lat1)*Math.sin(lat2) + Math.cos(lat1)*Math.cos(lat2) * Math.cos(dLon)) * R;


    return d;
}

Answer 5

You can use the Sphere object to calculate the distance between two coordinates like this:

var distance = ol.sphere.WGS84.haversineDistance([0,0],[180,0]); 
//20037508.34 meters 

Sphere provides also various algorithms to calculate the distance like cosine,equirectangular etc. You can also create the Sphere object with the radius of a different ellipsoid.

I don't know why the docs are not online, but you can check the methods available from the source code of the sphere object: https://github.com/openlayers/ol3/blob/master/src/ol/sphere.js

I personally think that looking at the source code is the best way to find answers about OpenLayers3 ;)