Leaflet.js - Нарисуйте полилинию до ближайшей точки с места

Question

Мне нужно нарисовать полилинию между двумя точками, используя кратчайшее расстояние. Пример: мое местоположение в Нью-Йорке, у меня есть место в Китае, и я хочу нарисовать полилинию, соединяющую эти две области.

Где я - см скрипку здесь: http://jsfiddle.net/Vsq4D/1/

Проблема заключается в том, что когда я рисую линию это самый короткий путь. В приведенном выше примере он извлекает из США в Китай линию, идущую вправо, самый длинный путь вокруг Земли, а не слева, что является самым коротким путем.

Что мне не хватает? Любые идеи, как рисовать линию в соответствии с самым коротким расстоянием?

Любая помощь очень ценится.

HTML:

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
<!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> 
<![endif]--> 

<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 

<div id="map" style="height:500px;"></div> 

JS:

//example user location 
var userLocation = new L.LatLng(35.974, -83.496); 

var map = L.map('map').setView(userLocation, 1); 
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', { 
maxZoom: 18, 
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>' 
}).addTo(map); 


var marker = new L.Marker(userLocation); 
map.addLayer(marker); 

//random locations around the world 
var items = [{ 
    //china 
    lat: "65.337", 
    lon: "158.027" 
}, { 
    //colombia 
    lat: "2.389", 
    lon: "-72.598" 
}, { 
    //libya 
    lat: "24.782", 
    lon: "17.402" 
}]; 

drawData(); 

//draw all the data on the map 
function drawData() { 
    var item, o; 
    //draw markers for all items 
    for (item in items) { 
     o = items[item]; 
     var loc = new L.LatLng(o.lat, o.lon); 
     createPolyLine(loc, userLocation); 
    } 
} 

//draw polyline 
function createPolyLine(loc1, loc2) { 

    var latlongs = [loc1, loc2]; 
    var polyline = new L.Polyline(latlongs, { 
     color: 'green', 
     opacity: 1, 
     weight: 1, 
     clickable: false 
    }).addTo(map); 

    //distance 
    var s = 'About ' + (loc1.distanceTo(loc2)/1000).toFixed(0) + 'km away from you.</p>'; 

    var marker = L.marker(loc1).addTo(map); 
    if (marker) { 
     marker.bindPopup(s); 
    } 
} 

Answer 1

Вот working jsfiddle, который отвечает на проблему линии. Существует метод, прикрепленный к объекту LatLng, называемому wrap, который должен помочь. Мне пришлось немного поэкспериментировать, чтобы заставить его работать. Я остановился на

if (Math.abs(loc1.lng - loc2.lng) > 180) { 
    latlongs = [loc1.wrap(179, -179), loc2]; 
} 

К сожалению, как вы можете видеть, маркер для Китая не реплицируется. Я добавил параметр worldCopyJump: true к объекту карты, но это не устраняет эту конкретную проблему. Не знаете, как это исправить.

Редактировать: Для потомков я забыл упомянуть, что причина, по которой она не работала раньше, была связана с переходом на Международную линию дат.