Leaflet.js - Narysuj polilinię do najbliższego punktu z lokalizacji
Muszę narysować polilinię między dwoma punktami, używając najkrótszej odległości. Przykład: moja lokalizacja to Nowy Jork, mam lokalizację w Chinach i chcę narysować polilinię łączącą te dwie lokalizacje.
Gdzie jestem - zobacz tutaj skrzypce:http://jsfiddle.net/Vsq4D/1/
Problem polega na tym, że kiedy rysuję linię, używa najkrótszej odległości. W powyższym przykładzie ciągnie się od USA do Chin z linią biegnącą w prawo, najdłuższą drogą dookoła Ziemi, a nie lewą, która jest najkrótszą drogą.
czego mi brakuje? Jakieś pomysły, jak narysować linię według najkrótszej odległości?
Każda pomoc bardzo doceniana.
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 © <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);
}
}