How can I detect the intersection of lines on a D3 geo globe?

戏子无情 提交于 2020-01-14 03:20:09

问题


I've been playing around with several d3 globes:

  • Rotating globe
  • Rotating orthographic
  • Morphing map projections

And I've put this together:

  • Great circle graph

My goal is to show that this graph can be 3 colored.

The problem I'm having is that the method of drawing lines involves using the orthographic projection of "LineString" paths. In the globe I linked above, my "great circles" are coded in this way:

// poles
svg.append("path")
    .datum({type: "LineString", coordinates: [[0, -180], [0, -90], [0, 0], [0, 90], [0, 180]]})
    .attr("class", "equator")
    .attr("d", path);
// "vertical variants"
svg.append("path")
    .datum({type: "LineString", coordinates: [[40, -180], [40, -90], [40, 0], [40, 90], [40, 180]]})
    .attr("class", "equator")
    .attr("d", path);
svg.append("path")
    .datum({type: "LineString", coordinates: [[60, -180], [0, -80], [60, 0], [180, 80], [60, 180]]})
    .attr("class", "equator2")
    .attr("d", path);




// equator
svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
    .attr("class", "equator")
    .attr("d", path);
// "horizontal variants"
svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 40], [-90, 0], [0, -40], [90, 0], [180, 40]]})
    .attr("class", "equator3")
    .attr("d", path);

svg.append("path")
    .datum({type: "LineString", coordinates: [[-180, 20], [-90, 20], [0, -20], [90, -20], [180, 20]]})
    .attr("class", "equator")
    .attr("d", path);

svg.append("path")
    .datum({type: "Point", coordinates: [60, -30]})
    .attr("class", "point")
    .attr("d", path);

The tricky part here is understanding the coordinates: [[-180, 40], [-90, 0], [0, -40], [90, 0], [180, 40]]

I get that we're basically talking "longitude and latitude" here with these coordinates, and I'm able to use these to build "great circles" that wrap the globe.

The problem I'm having is calculating if great circles added with this kind of coordinate system intersect.

For example, in the above linked globe I put a blue point near 3 very close points of intersection of a red line, the green line and a blue line. I have no idea how to calculate where exactly these 3 points of intersection actually lie.

Is there a way to simply have d3 detect the points of intersection of my "LineString" paths?

I want to be able to put points on these intersections, and also track which "great circles" are involved with the intersection...

Alternatively, can someone point me toward a way of calculating this from the projected coordinate system used here by d3?

来源:https://stackoverflow.com/questions/33358328/how-can-i-detect-the-intersection-of-lines-on-a-d3-geo-globe

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!