我有一个d3地图显示了航运线路。这些线条作为我使用投影和d3路径绘制的坐标列表提供。非常普通的东西。问题是如果我想要的路径从-179°E到+ 179°E,发生了什么。不幸的是它穿越了地图。有什么办法让它离开地图的左边并重新出现在地图的右侧?停止d3路径穿越地图
2
A
回答
2
如果在绘制连接它们的线(使用svg点阵列)之前用投影绘制点,则在穿过反子午线时线不会像所期望的那样运行。毕竟,你只是在二维网格上绘制点并将它们连接起来,就好像它们是二维网格上的点一样。
但是,如果您使用geoPath(使用long,lat字体数组)绘制线条,则路径将遵循点之间的最短距离(大圆距)。一个地理路径执行三维数学转换将地球上的点连接到二维空间中的路径的路径。这意味着
- 两个点之间的线将ARC(明显地,如果离得足够远,并根据投影)
- 逆子午线并不重要 - 大圆距离是独立的,其中子午线是
- 操纵地图更容易了。
您可能已经在使用geoPath
作为背景功能。如果不是,d3.geoPath()
需要分配投影,因为您已经有一个投影,您可以使用var path = d3.geoPath().projection(projection)
。
A geoPath
需要geojson特征或几何对象。你可以像很容易地创建一个行:
var coords = [[-179,0],[179,0]];
svg.append("path")
.datum({ "type": "LineString", "coordinates": coords })
这里的路径脱落地图的左侧,remerging右侧的例子。 (我不能制作足够小的太平洋边缘的片段,所以我已经使用了美国并旋转了它,以便它被反经线切成两半,但它也会切断+/- 180的经度也参见,用于绘制两个或多个点之间的地理路径,this):
var width = 500;
var height = 300;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var projection = d3.geoMercator()
.rotate([-75,0])
.scale(50)
.translate([width/2,height/2]);
var path = d3.geoPath().projection(projection);
var usa = {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-94.81758,49.38905],[-88.378114,48.302918],[-82.550925,45.347517],[-82.439278,41.675105],[-71.50506,45.0082],[-69.237216,47.447781],[-66.96466,44.8097],[-70.11617,43.68405],[-70.64,41.475],[-73.982,40.628],[-75.72205,37.93705],[-75.72749,35.55074],[-81.49042,30.72999],[-80.056539,26.88],[-81.17213,25.20126],[-83.70959,29.93656],[-89.18049,30.31598],[-94.69,29.48],[-99.02,26.37],[-100.9576,29.38071],[-104.45697,29.57196],[-106.50759,31.75452],[-111.02361,31.33472],[-117.12776,32.53534],[-120.36778,34.44711],[-123.7272,38.95166],[-124.53284,42.76599],[-124.68721,48.184433],[-122.84,49],[-116.04818,49],[-107.05,49],[-100.65,49],[-94.81758,49.38905]]],[[[-155.06779,71.147776],[-140.985988,69.711998],[-140.99777,60.306397],[-148.018066,59.978329],[-157.72277,57.570001],[-166.121379,61.500019],[-164.562508,63.146378],[-168.11056,65.669997],[-161.908897,70.33333],[-155.06779,71.147776]]]]},"properties":{"name":"United States of America"},"id":"USA"}
]};
svg.append("path")
.attr("d",path(usa));
var coords = [[-150,65],[-80,25],[-121,36]];
svg.append("path")
.datum({ "type": "LineString", "coordinates": coords })
.attr("fill","none")
.attr("stroke","steelblue")
.attr("stroke-width",4)
.attr("d",path);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
相关问题
- 1. 防止穿越dagre-d3中的箭头
- 2. Facebook和Twitter的iframes穿越路径
- 3. 获得的唯一路径数量穿越而穿越利用我创建的Neo4j穿越API
- 4. 如何阻止玩家穿越图层?
- 5. Voronoi情节,线路穿越
- 6. D3地图:放大到路径组
- 7. 穿越红宝石地图问题
- 8. 防御路径穿越攻击的最佳方法是什么?
- 9. D3.js - 线图:区域路径在变焦上穿过x和y轴
- 10. 穿越迷宫的最佳路线
- 11. 穿越链表
- 12. Android:NAT穿越?
- 13. 穿越SQLite表
- 14. PHParray穿越
- 15. vb.net穿越
- 16. 如何阻止我的角色穿越地面
- 17. d3.js地理 - 渲染svg路径
- 18. XSLT节点穿越
- 19. IPSec的NAT穿越
- 20. jQuery的nextALL穿越
- 21. 穿越阵列Javascript
- 22. NAT穿越实验?
- 23. PHP的SimpleXML穿越
- 24. NAT穿越和IPv6
- 25. D3/CSS大教堂向上穿越/选择
- 26. 地图木偶路径绝对路径
- 27. 我们应该穿越地图吗?为什么?
- 28. 谷歌地图Flash - 带孔的多边形,穿越子午线
- 29. 穿越的Neo4j图形的Cypher
- 30. d3触发其他路径下的路径上的鼠标悬停?