Проблема с рисованием дуги на карте холста d3

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

Теперь я хочу нарисовать дугу () на основе этогопара координат:

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

В этом случае я ожидаю, что дуга () будет размещена в точных географических координатах, но похоже, что дуга не понимает долготу и широту, поэтому она принимает значения X и Y какгоризонтальное и вертикальное положение.
Как это исправить?

Answer 1

Проекция берет пару широты и долготы и преобразует ее из трехмерного координатного пространства с единицами измерения в градусах в двухмерное координатное пространство с единицами измерения в пикселях.

У вас есть проекция, я предполагаю, что вы используете ее для рисования фоновых объектов с 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);