剪切非投影元素(正交)

时间:2017-02-18 23:32:07

标签: d3.js

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

我的第一个想法是,我可能需要做一些球形几何来获得裁剪发生的坐标,但现在我想知道是否有一种更简单的方法来实现这一点(我是D3的新手)。 / p>

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

enter image description here

1 个答案:

答案 0 :(得分:0)

我对d3也非常环保,但幸运的是,我也很自豪地寻找一种能够在拼写中剪裁飞行线的合适解决方案。您链接到的演示在很多方面都很聪明:

  1. 圆弧是从投影的2D坐标中用Catmull-Rom curve插值的三个点绘制的,恰好在3D中可视地逼近真正的圆形曲线
  2. 当你指出
  3. 时,这条线会随着它的任一点接近剪裁平面而消失

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

      

    我的第一个想法是,我可能需要做一些球形几何来获得裁剪发生的坐标,但现在我想知道是否有更简单的方法来实现这个

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

    1. 通过当前球体中心与弧的大圆平面法线的叉积获得裁剪点的坐标。鉴于您的出发地和目的地PoPd以及地球中心C,您正在寻找C x (Po x Pd)规范化
    2. 使用d3.geoInterpolate
    3. 之类的内容插入原点和目的地之间的坐标
    4. 项目内插点位于地面上方scale(读取:海拔)的航线的那一部分
    5. 沿着两者之间的插值点从原点到剪切点绘制一条[平滑]线,另一条从剪切点到目标,相应地将一条线移动到背景。观察整条线在裁剪平面前面或后面的情况。
    6. 要确定您需要将剪切点拼接在飞行路径中的哪个位置,您可能需要将剪切点的大角度与一端与端到端进行比较。另请注意,性能会受到影响,但您可能仍然对您在示例中绘​​制的航线数量感到满意。