¿Cómo obtener la distancia y la dirección de cada línea de ruta utilizando el complemento Leaflet.PolylineMeasure?

Question

He estado jugando con polylinemeasure:change y veo que puedo obtener fácilmente el valor de la distancia total con currentLine.distance.

Pero, ¿cómo puedo obtener el valor de la distancia de cada segmento de la línea y su rumbo?

Esto es lo más lejos que llegué:

// Define algunas opciones de mapa
var mapOptions = {
  center: [20.27, -157],
  zoom: 7
};

// Crea un mapa y asígnalo al div del mapa
var map = L.map("leafletMapid", mapOptions);

// Agrega una capa base
var baselayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  attribution:
    '© OpenStreetMap contribuyentes'
}).addTo(map);

baselayer.addTo(map);

// Crea polylinemeasure

const pMeasure = L.control.polylineMeasure();
pMeasure.addTo(map);

map.on("polylinemeasure:change", (currentLine) => {
  console.log(currentLine.distance);
});

Puedes ver este ejemplo aquí: https://codesandbox.io/s/polylinemeasure-from-points-forked-xux7si?file=/src/index.js

Answer 1

Al revisar el código fuente del complemento L.control.polylineMeasure, se muestra que los datos de los rumbos se calculan solamente cuando la opción showBearings está configurada como true, y aún así, los datos se almacenan solamente en la herramienta de información del marcador.

La solución es 'robar' la función de cálculo de rumbos del código fuente del complemento y calcular los rumbos a partir de las coordenadas polylineMeasure._currentLine.circleCoords.

El código podría verse algo así (se establece showBearings como true para verificar la corrección del método):

let polylineMeasure = L.control.polylineMeasure ({
  position:'topleft',
  unit:'kilometros',
  clearMeasurementsOnStop: false,
  showClearControl: true,
  showUnitControl: true,
  showBearings: true
});
polylineMeasure.addTo (map);

var calcAngle = function (p1, p2, direction) {
    var lat1 = p1.lat / 180 * Math.PI;
    var lat2 = p2.lat / 180 * Math.PI;
    var lng1 = p1.lng / 180 * Math.PI;
    var lng2 = p2.lng / 180 * Math.PI;
    var y = Math.sin(lng2-lng1) * Math.cos(lat2);
    var x = Math.cos(lat1)*Math.sin(lat2) - Math.sin(lat1)*Math.cos(lat2)*Math.cos(lng2-lng1);
    if (direction === "inbound") {
        var brng = (Math.atan2(y, x) * 180 / Math.PI + 180).toFixed(0);
    } else {
        var brng = (Math.atan2(y, x) * 180 / Math.PI + 360).toFixed(0);
    }
    return (brng % 360);
}

function debugevent(e) {
  var coords = polylineMeasure._currentLine.circleCoords;
  var lastInd = coords.length - 1;
  if (lastInd > 0) {
    var outb = calcAngle(coords[lastInd - 1], coords[lastInd], 'outbound');
    var inb = calcAngle(coords[lastInd], coords[lastInd - 1], 'inbound');
    console.log('Rumbos de la Línea ' + lastInd + ':');
    console.log('  - inicio hacia fuera: ' + outb);
    console.log('  - final hacia dentro: ' + inb);
  }
}

map.on('polylinemeasure:change', debugevent);

Al medir:

se obtendría este resultado:

Rumbos de la Línea 1:
  - inicio hacia fuera: 356
  - final hacia dentro: 356
Rumbos de la Línea 2:
  - inicio hacia fuera: 290
  - final hacia dentro: 280
Rumbos de la Línea 3:
  - inicio hacia fuera: 218
  - final hacia dentro: 213
Rumbos de la Línea 4:
  - inicio hacia fuera: 153
  - final hacia dentro: 157