【问题标题】:Clipping non-projection elements (orthographic)剪裁非投影元素(正交)
【发布时间】:2017-07-08 09:27:01
【问题描述】:

我想在我的正交投影中添加“飞行”(3D) 弧线,如 here 所示,但使用剪切而不是淡入淡出效果。这似乎很困难,因为弧是独立于投影创建的。 (每条弧由从投影中获得的三个点定义——起点、终点和大圆中点沿画布中心的一条线延伸——但弧本身是使用“2D”基数插值在相应的svg 画布上的点。)

我的第一个想法是我可能需要做一些球面几何来获取发生剪切的坐标,但现在我想知道是否有更直接的方法来完成这个(我是 D3 的新手)。

这是我的地图没有裁剪的样子:

【问题讨论】:

    标签: d3.js


    【解决方案1】:

    我对 d3 也很熟悉,但幸运的是,我自己也刚开始寻找一个像样的解决方案来在正交中剪裁飞行线。您链接到的演示在很多方面都很聪明:

    1. 弧线是由三个点绘制的
    2. 正如您所指出的,随着它的任一点接近剪切平面,线条会逐渐消失

    在投影的 2D 坐标中绘制样条曲线消除了在投影之前分割线并获得廉价视觉平滑度的任何选项,即使 d3 本身具有该功能(无论如何我都无法找到)。这意味着插值必须更加手动。

    我的第一个想法是我可能需要做一些球面几何来获取发生剪切的坐标,但现在我想知道是否有更直接的方法来完成此操作

    我最终选择了我认为最明显的选项,但不幸的是,您的目标正是要避免:

    1. 通过当前地球中心与圆弧大圆平面法线的叉积获得剪切点的坐标。分别给定您的出发地和目的地Po 和Pd 以及地球中心C,您正在寻找C x (Po x Pd) 标准化
    2. 使用类似 d3.geoInterpolate 的方法在起点和终点之间插入坐标
    3. 为那部分飞行路线在地面上方的右侧 scale(阅读:海拔)投影插值点
    4. 沿着中间的插值点从原点到剪切点绘制一条 [平滑] 线,从剪切点到目的地绘制另一条线,将一条相应地移动到背景。观察整条线在剪裁平面前面或后面的情况。

    要确定在飞行路径中需要拼接剪裁点的位置,您可能需要将剪裁点的大角度与一端与端到端进行比较。另请注意,性能会受到影响,但您可能仍对示例中绘制的航线数量感到满意。

    【讨论】:

      猜你喜欢
      • 2011-10-14
      • 2014-10-14
      • 1970-01-01
      • 2021-05-30
      • 1970-01-01
      • 2023-03-08
      • 1970-01-01
      • 2021-07-15
      • 1970-01-01
      相关资源
      最近更新 更多