D3 Canvas 地球仪与 LongLat 处的文本答案

【问题标题】：D3 Canvas Globe With Text At LongLatD3 Canvas 地球仪与 LongLat 处的文本
【发布时间】：2017-08-15 12:29:52
【问题描述】：

我今天的问题是关于 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();
};

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

【问题讨论】：

标签： javascript d3.js canvas

【解决方案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，以将地名进一步向右推。见this plunker。

【讨论】：

非常感谢，这正是我想要的！