我整理了一个 jsfiddle,我在其中实现了 Bostock 旋转地球仪。
然后我尝试绘制几个标记(城市)。这只是部分成功。由于某种原因,并不是所有的都被绘制出来——而且,我假设出于类似的原因——用于隐藏那些看不见的城市(即在地球后面)的脚本没有按预期工作。当您将标记滚动到看不见的地方时,它们仍在不请自来地跳来跳去。
我整理了以下 fiddle :http://jsfiddle.net/Guill84/jg3axLmx/1/
下面是用于“隐藏”地球后面的标记的脚本:
function position_cities() {
var centerPos = projection.invert([380,380]);
var arc = d3.geo.greatArc();
svg.selectAll(".cities")
.style("fill", "blue")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.style({
"color": "#FFF",
"display": function(d) {
var x = projection([d.lon, d.lat])[0];
var y = projection([d.lon, d.lat])[1];
var d = arc.distance({
source: [d.lat, d.lon],
target: centerPos
});
return (d > 1.57) ? 'none' : 'inline';
}
});
}
此外 - 您知道如何为这些标记添加标签,并使它们变成方形而不是圆形吗?
最佳答案
你几乎拥有它,
如评论中所述,中心点位于 400,400:
var centerPos = projection.invert([400,400]);
并且您在此处混淆了源坐标中的经纬度顺序:
var d = arc.distance({source: [d.lat, d.lon], target: centerPos});
return (d > 1.57) ? 'none' : 'inline';
这应该是:
var d = arc.distance({source: [d.lon, d.lat], target: centerPos});
return (d > 1.57) ? 'none' : 'inline';
fiddle :http://jsfiddle.net/L51y3c1b/
关于javascript - 无法将城市隐藏在旋转的地球后面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41119041/