Leaflet.js - 将折线绘制到距某个位置最近的点

Question

我需要使用最短距离在两点之间绘制一条折线。\n例如，我的位置是纽约，我在中国有一个位置，我想绘制一条连接这两个位置的折线。

\n\n

我在哪里 - 请参阅此处的小提琴：http ://jsfiddle.net/Vsq4D/1/

\n\n

问题是，当我画线时，它确实使用了最短距离。在上面的例子中，它从美国到中国，线向右，这是绕地球最长的距离，而不是向左，这是最短的距离。

\n\n

我缺少什么？有什么想法如何根据最短距离画线吗？

\n\n

\n\n

非常感谢任何帮助。

\n\n

HTML：

\n\n

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />\n<!--[if lte IE 8]>\n   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />\n<![endif]-->\n\n<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>\n\n<div id="map" style="height:500px;"></div>\n

\n\n

JS：

\n\n

//example user location\nvar userLocation = new L.LatLng(35.974, -83.496);\n\nvar map = L.map(\'map\').setView(userLocation, 1);\nL.tileLayer(\'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png\', {\nmaxZoom: 18,\nattribution: \'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 \xc2\xa9 <a href="http://cloudmade.com">CloudMade</a>\'\n}).addTo(map);\n\n\nvar marker = new L.Marker(userLocation);\nmap.addLayer(marker);\n\n//random locations around the world\nvar items = [{\n    //china\n    lat: "65.337",\n    lon: "158.027"\n}, {\n    //colombia\n    lat: "2.389",\n    lon: "-72.598"\n}, {\n    //libya\n    lat: "24.782",\n    lon: "17.402"\n}];\n\ndrawData();\n\n//draw all the data on the map\nfunction drawData() {\n    var item, o;\n    //draw markers for all items\n    for (item in items) {\n        o = items[item];\n        var loc = new L.LatLng(o.lat, o.lon);\n        createPolyLine(loc, userLocation);\n    }\n}\n\n//draw polyline\nfunction createPolyLine(loc1, loc2) {\n\n    var latlongs = [loc1, loc2];\n    var polyline = new L.Polyline(latlongs, {\n        color: \'green\',\n        opacity: 1,\n        weight: 1,\n        clickable: false\n    }).addTo(map);\n\n    //distance\n    var s = \'About \' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + \'km away from you.</p>\';\n\n    var marker = L.marker(loc1).addTo(map);\n    if (marker) {\n        marker.bindPopup(s);\n    }\n}\n

\n

Answer 1

这是一个可以解决线路问题的工作 jsfiddle 。LatLng 对象附加了一个名为“wrap”的方法，应该会有所帮助。我必须进行一些实验才能使其发挥作用。我决定

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

不幸的是，正如您所看到的，中国的标记没有被复制。我worldCopyJump: true向地图对象添加了该选项，但它并没有解决该特定问题。不知道如何解决这个问题。

编辑：为了后代的缘故，我忘记提及它之前不起作用的原因是由于国际日期变更线的转变。