今天我的问题是关于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();
};
基本上我要求的是一种使用画布在地球上的特定长/纬坐标右侧稍微显示文本的方法。非常感谢任何和所有的帮助。提前谢谢!
答案 0 :(得分: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。