D3 帆布地球仪与文本在 LongLat

Question

我今天的问题是关于 D3 并使用 Canvas 在地球上以长/纬度显示文本。我基本上得到的是一个使用mbostock的世界巡回演唱会建造的地球仪，它有一个长/纬度的列表，并旋转地球以专注于它们。我已经在点上有了标记，但我想要的是在所有点旁边显示一些文本。目前，它只是城市名称，但目的是显示更多信息，因为地球更加充实。我用代码创建了一个 plunk：https://plnkr.co/edit/CzfoF4bkPv93l3Yxwu3N?p=preview

该 plunk 中的相关代码是：

return function(t) {
projection.rotate(r(t));
c.clearRect(0, 0, width, height);
c.fillStyle = "#ccc", c.beginPath(), path(land), c.fill();
for (var j = 0; j < points.length; j++) {
c.fillStyle = "#000", c.beginPath(), path(points[j]), c.fill();
}
c.strokeStyle = "#000", c.lineWidth = 2, c.beginPath(), path(globe), c.stroke();
};

基本上，我要求的是一种使用画布在地球上特定长/纬度坐标右侧略微显示文本的方法。非常感谢任何和所有的帮助。提前谢谢你！

Answer 1

最简单的方法是在绘制特征后在补间函数中添加文本：

c.fillText(points[i].location,projection(points[i].coordinates)[0]+10,projection(points[i].coordinates)[1]+2);

使用变量projection，projection([long,lat])返回[x,y]，换句话说，它给出了由纬度和经度表示的给定点的前向投影，返回地图坐标空间(您的 svg 或画布(中的坐标。

获得投影坐标后，您可以根据需要对其进行操作。在本例中，我在 x 值中添加了 10，以将地名进一步向右推。 看到这个褶皱。