javascript - 在 d3 Canvas map 上绘制弧线的问题

Question

假设我们有一些基本设置:

const canvas = document.getElementById("mycanvas");
const projection = d3.geoEquirectangular()
      .fitSize([canvasWidth, canvasWidth/2], {type: 'Sphere'})
      .precision(0.1);
context = canvas.getContext("2d");
const path = d3.geoPath()
      .projection(projection)
      .context(context);
context.drawImage(someImage, 0, 0, canvasWidth, canvasWidth/2)

然后我们有一个坐标对:

longitude = 34.9213213
latitude = -23.8229938

现在，我想根据这个坐标对绘制一个 arc() :

context.beginPath();
context.arc(longitude, latitude, 30, 0, 2*Math.PI);
context.strokeStyle = "green"
context.stroke();
context.closePath() 

在这种情况下，我希望 arc() 被放置在精确的地理坐标中，但似乎 arc 不理解经度和纬度，所以它将 X 和 Y 值作为水平和垂直位置。
我该如何解决这个问题？

Answer 1

投影采用经纬度对，并将其从以度为单位的 3D 坐标空间转换为以像素为单位的 2D 坐标空间。

您有一个投影，我假设您使用它通过 d3.geoPath() 绘制背景特征。通过以这种方式使用路径，您可以获取背景要素的纬度/经度对并将它们转换为像素。但是您在绘制弧线时并未使用它，而是将纬度/经度对视为像素坐标。

context.arc() 将提供的 x 和 y 视为像素值；它与选定的 d3.geoProjection 或 d3.geoPath 没有关联。

如果 context.arc() 确实进行了地理投影，您仍然必须指定投影以便 context.arc() 使用相同的投影投影为 d3.geoPath() - 否则您的功能将无法正确重叠。

相反，投影您的纬度经度点以获取其位置(以像素为单位)，并将其传递给 context.arc():

var point = projection([longitude,latitude]); // project a latitude longitude pair to get [x,y] in pixels
context.arc(point[0], point[1], 30, 0, 2*Math.PI);