4

最短距離を使用して 2 点間にポリラインを描画する必要があります。たとえば、私の場所はニューヨークで、中国に場所があり、2 つの場所を結ぶポリラインを描画したいと考えています。

私がいる場所 - ここでフィドルを参照してください: 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);
    }
}
4

1 に答える 1

3

これは、回線の問題に答える動作中のjsfiddleです。LatLng オブジェクトに添付された wrap と呼ばれるメソッドが役立ちます。それを機能させるには、少し実験する必要がありました。私は落ち着いた

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

残念ながら、ご覧のとおり、中国のマーカーは複製されていません。マップ オブジェクトにオプションを追加しましたworldCopyJump: trueが、その特定の問題は修正されません。それを修正する方法がわからない。

編集: 後世のために、以前は機能していなかった理由は国際日付変更線への移行のためだったことを忘れていました。

于 2013-09-25T16:06:42.000 に答える