單張測地 - 大數據集顯示不出來

Question

我使用了以下內容：

$.ajax({ 
    type: "GET", 
    url: "/geojson/routes", 
    dataType: 'json', 
    async: true, 
    success: function(latlngs) { 
    var Geodesic = L.geodesic([latlngs], { 
     weight: 3, 
     opacity: 1, 
     color: 'navy', 
     steps: 200 
    }).addTo(mymap); 
    } 
}); 

有了這個數據集：

[ 
    [ 
    33.63669961111111, -84.427864 
    ], 
    [ 
    28.42938888888889, -81.309 
    ], 
    [ 
    44.65094444444444, -73.46813888888889 
    ], 
    [ 
    28.42938888888889, -81.309 
    ] 
] 

我也得到很好的平滑測地線，但是當我使用更大的數據集：

[ 
    [ 
    33.43427777777777, -112.01158333333333 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    33.942625, -118.40780277777779 
    ], 
    [ 
    39.861666666666665, -104.67316666666667 
    ], 
    [ 
    39.861666666666665, -104.67316666666667 
    ], 
    [ 
    33.942625, -118.40780277777779 
    ], 
    [ 
    44.881972222222224, -93.22177777777777 
    ], 
    [ 
    44.881972222222224, -93.22177777777777 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    39.861666666666665, -104.67316666666667 
    ], 
    [ 
    33.942625, -118.40780277777779 
    ], 
    [ 
    33.63669961111111, -84.427864 
    ], 
    [ 
    33.63669961111111, -84.427864 
    ], 
    [ 
    28.42938888888889, -81.309 
    ], 
    [ 
    44.65094444444444, -73.46813888888889 
    ], 
    [ 
    28.42938888888889, -81.309 
    ], 
    [ 
    28.42938888888889, -81.309 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    26.071666666666665, -80.14969444444445 
    ], 
    [ 
    26.071666666666665, -80.14969444444445 
    ], 
    [ 
    29.984444444444446, -95.34144444444443 
    ], 
    [ 
    32.733555555555554, -117.18966666666667 
    ], 
    [ 
    32.733555555555554, -117.18966666666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    27.97547222222222, -82.53325 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ], 
    [ 
    44.881972222222224, -93.22177777777777 
    ], 
    [ 
    44.881972222222224, -93.22177777777777 
    ], 
    [ 
    33.43427777777777, -112.01158333333333 
    ], 
    [ 
    39.861666666666665, -104.67316666666667 
    ], 
    [ 
    39.861666666666665, -104.67316666666667 
    ], 
    [ 
    41.97732013888889, -87.90800591666667 
    ] 
] 

什麼都沒有顯示。我仔細檢查過，兩組語句在句法上看起來完全相同。可以用這種方式加載的數據量是否有限制？

我使用https://github.com/henrythasler/Leaflet.Geodesic

Answer 1

你的第二個（ 「大」）數據集有多個相同的連續（重複）座標。

看起來像Leaflet.Geodesic插件不喜歡那樣，因爲它不能計算2個相同位置之間的任何方位。

只需過濾掉那些重複項，然後一切正常。

理想情況下，你會重構數據集，以消除那些位置，或者你也可以做到這一點在運行時：

function filterSuccessiveDuplicatePositions(latlngs) { 
    var result = []; 

    if (latlngs.length > 0) { 
    result.push(latlngs[0]); 
    } 

    for (var i = 1; i < latlngs.length; i += 1) { 
    if (!L.latLng(latlngs[i]).equals(latlngs[i - 1])) { 
     result.push(latlngs[i]); 
    } 
    } 

    return result; 
} 

$.ajax({ 
    type: "GET", 
    url: "routes2", 
    dataType: 'json', 
    async: true, 
    success: function(latlngs) { 
    console.log(latlngs); 
    var filtered = filterSuccessiveDuplicatePositions(latlngs); 
    var Geodesic = L.geodesic([filtered], { 
     weight: 3, 
     opacity: 1, 
     color: 'navy', 
     steps: 200 
    }).addTo(mymap); 
    } 
}); 

演示：https://plnkr.co/edit/HaQPp6PzoW9mRVcIimw0?p=preview

BTW這個bug跟蹤在plugin repository issue #9