【问题标题】:Leaflet.js wrap LatLng positions of line to nearest lineLeaflet.js 将行的 LatLng 位置包装到最近的行
【发布时间】:2022-06-28 23:42:50
【问题描述】:

我想让用户点击两个位置,然后在它们之间画一条线。这是完全实用且简单的。如果点击在 -180;180 范围之外,它也可以工作。

createPolyLine(outside2, userLocation);

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

var latlongs = [loc1, loc2];

console.log(loc1);

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

}

现在如果用户点击 -600 的经度,我想让它自动换行到 -180;180 区域,但前提是它是最近的路径。如果它更接近将点击保持在 -360:-180 区域,那么它应该环绕到 -360;-180 区域。当然,正方向的另一侧也是如此。 我的意思的示例图片:

Example of when its closer to use -360;-180 region and not wrap it into -180;180

Example of when its closer to use -180;180 and it would be wrong now

Based on second example but correctly wrapped now

根据两点之间最近线的位置,实现这种自动换行到 -360;-180 / -180;180 / 180;360 的最有效方法是什么?

【问题讨论】:

  • 您似乎需要找到以 360 为模的差分绝对值的最小值。我不确定这是否总是正确的,但应该适用于所有实际情况,而不是半个地球。

标签: javascript google-maps leaflet latitude-longitude


【解决方案1】:

感谢 Corey Alix 的回复,我想出了一个感觉有点脏的解决方案,但它适用于我尝试过的所有测试用例。在我的场景中,一点总是在 -180;180 范围内。

// a is always in -180;180
function getPositions(a, b) {
    
  b.lng %= 360;
  
  let abs = Math.abs(a.lng - b.lng);
  let absWrap = Math.abs(a.lng - b.wrap().lng);
  
  if(absWrap < abs) {
    b = b.wrap();
    abs = absWrap;
  }
  
  let left = new L.LatLng(b.lat, b.lng - 360);
  let right = new L.LatLng(b.lat, b.lng + 360);
  
  let leftAbs = Math.abs(a.lng - left.lng);
  
    if(leftAbs < abs) {
    b = left;
    abs = leftAbs;
  }
  
  if(Math.abs(a.lng - right.lng) < abs) {
    b = right;
  }
  
  return [a, b];
  
}

//draw polyline
function createPolyLine(loc1, loc2) {
    
    var latlongs = getPositions(loc2, loc1);
    
    polyline = new L.Polyline(latlongs, {
        color: 'white',
        opacity: 1,
        weight: 1,
        clickable: false
    }).addTo(map);

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-03-04
    • 2013-05-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-31
    相关资源
    最近更新 更多