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（）放置在精确的地理坐标中，但是似乎弧无法理解经度和纬度，因此将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);

在d3画布地图上绘制圆弧的问题

1 个答案: