Quiero que el usuario haga clic en dos posiciones y luego dibuje una línea entre ellas. Esto es totalmente funcional y fácil. Y también funciona si el clic está fuera del rango de -180;180.
createPolyLine(outside2, userLocation); //draw polyline function createPolyLine(loc1, loc2) { var latlongs = [loc1, loc2]; console.log(loc1); var polyline = new L.Polyline(latlongs, { color: 'white', opacity: 1, weight: 1, clickable: false }).addTo(map); }Ahora, si un usuario hace clic en la longitud de -600, quiero que se ajuste automáticamente al área de -180; 180, pero solo si es la ruta más cercana. Si está más cerca de mantener el clic en el área -360:-180, entonces debería ajustarse al área -360;-180. Lo mismo para el otro lado en dirección positiva, por supuesto. Imagen de ejemplo de lo que quiero decir:
Ejemplo de cuándo está más cerca de usar la región -360;-180 y no envolverla en -180;180
Ejemplo de cuando está más cerca de usar -180;180 y estaría mal ahora
Basado en el segundo ejemplo pero envuelto correctamente ahora
¿Cuál sería la forma más eficiente de lograr este ajuste automático en -360;-180 / -180;180 / 180;360 dependiendo de dónde estaría la línea más cercana entre dos puntos?
Gracias a la respuesta de Corey Alix, se me ocurrió una solución que se siente un poco sucia, pero funciona para todos los casos de prueba que probé. En mi escenario, un punto siempre está en el rango de -180;180.
// a is always in -180;180 function getPositions(a, b) { b.lng %= 360; let abs = Math.abs(a.lng - b.lng); let absWrap = Math.abs(a.lng - b.wrap().lng); if(absWrap < abs) { b = b.wrap(); abs = absWrap; } let left = new L.LatLng(b.lat, b.lng - 360); let right = new L.LatLng(b.lat, b.lng + 360); let leftAbs = Math.abs(a.lng - left.lng); if(leftAbs < abs) { b = left; abs = leftAbs; } if(Math.abs(a.lng - right.lng) < abs) { b = right; } return [a, b]; } //draw polyline function createPolyLine(loc1, loc2) { var latlongs = getPositions(loc2, loc1); polyline = new L.Polyline(latlongs, { color: 'white', opacity: 1, weight: 1, clickable: false }).addTo(map); }