Question

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

的插件

该插件中的相关代码是：

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值上加了十，将地名进一步向右推。请参阅this plunker。

D3帆布地球与文本在LongLat

1 个答案: