Простой вариант, когда смотрят на шар на уровне экватора, в параллельной проекции.
Центр шара примем за точку отсчёта, ноль.
Два
угла определяют положение точки на поверхности шара относительно его центра:
- широта (latitude, север-юг) от -∏/2 (северный полюс) до ∏/2 (южный полюс);
- долгота (longitude, запад-восток) от 0 до 2∏ (полный круг).
В прокции на плоскость (экран) точки шара попадут внутрь окружности радиуса
R. Центр попадет в центр. Северный полюс – в верхнюю точку, южный – в нижнюю.
Высота зависит только от широты, тут всё просто:
y = R * sin(lat)
Влево-вправо от центральной оси зависит от обоих углов. От широты зависит максимально возможное удаление от оси
R * cos(lat). А ещё уменьшиться оно может в зависимости от долготы: надо домножить на
cos(lng). Итого получается
x = R * cos(lat) * cos(lng)
Кроме того посмотрите в коде, как правильно создавать элементы внутри SVG и задавать им атрибуты. А также значение viewBox чтобы (0, 0) была по центру.
Простой
