如何通过单个坐标、角度和距离，使用JavaScript创建正方形多边形？

根据你给出的条件（已知单个顶点、3km边长、内角90度），需要先明确坐标类型是平面直角坐标还是地理经纬度坐标，以下分别给出实现方案：

一、平面直角坐标系场景 #

假设已知起点坐标为 (x0, y0)，以及正方形第一条边（从起点出发）与x轴正方向的夹角（单位：度），按以下步骤计算四个顶点：

核心逻辑 #

1. 利用三角函数计算相邻顶点的坐标偏移量；
2. 正方形的相邻边夹角为90度，因此第二条边的方向是第一条边逆时针旋转90度（若需顺时针旋转，调整符号即可）。

JavaScript代码示例 #

// 自定义参数
const startPoint = { x: 500, y: 500 }; // 示例起点坐标
const sideLength = 3000; // 边长3km，单位统一为米
const edgeAngleDeg = 30; // 第一条边与x轴正方向的夹角（单位：度）

// 角度转弧度
const angleRad = edgeAngleDeg * Math.PI / 180;

// 计算四个顶点
const pointA = startPoint;
// 点B：从A沿指定方向走3km
const pointB = {
  x: pointA.x + sideLength * Math.cos(angleRad),
  y: pointA.y + sideLength * Math.sin(angleRad)
};
// 点C：从B沿逆时针转90度方向走3km
const pointC = {
  x: pointB.x - sideLength * Math.sin(angleRad),
  y: pointB.y + sideLength * Math.cos(angleRad)
};
// 点D：从A沿逆时针转90度方向走3km
const pointD = {
  x: pointA.x - sideLength * Math.sin(angleRad),
  y: pointA.y + sideLength * Math.cos(angleRad)
};

// 闭合的正方形顶点数组（用于绘制多边形）
const squareVertices = [pointA, pointB, pointC, pointD, pointA];

console.log('正方形顶点：', squareVertices);

二、地理经纬度坐标系场景 #

如果已知的是WGS84经纬度（比如GPS坐标），需要考虑地球球面曲率，用球面三角公式计算偏移后的坐标：

核心逻辑 #

1. 使用Haversine公式的衍生算法，根据起点、方位角、距离计算终点经纬度；
2. 依次计算沿初始方向、初始方向+90度方向的顶点，形成正方形。

JavaScript代码示例 #

// 自定义参数
const startPoint = { lat: 31.2304, lon: 121.4737 }; // 上海外滩经纬度示例
const sideLength = 3000; // 边长3km
const initialBearing = 0; // 初始方位角：正北为0度，顺时针旋转（0=北，90=东，180=南，270=西）
const earthRadius = 6378137; // 地球赤道半径，单位米

// 工具函数：角度转弧度
const degToRad = (deg) => deg * Math.PI / 180;
// 工具函数：弧度转角度
const radToDeg = (rad) => rad * 180 / Math.PI;

// 工具函数：根据起点、方位角、距离计算终点坐标
function getDestination(lat1, lon1, bearing, distance) {
  const lat1Rad = degToRad(lat1);
  const lon1Rad = degToRad(lon1);
  const bearingRad = degToRad(bearing);
  const dOverR = distance / earthRadius;

  // 计算终点纬度
  const lat2Rad = Math.asin(
    Math.sin(lat1Rad) * Math.cos(dOverR) +
    Math.cos(lat1Rad) * Math.sin(dOverR) * Math.cos(bearingRad)
  );
  // 计算终点经度
  const lon2Rad = lon1Rad + Math.atan2(
    Math.sin(bearingRad) * Math.sin(dOverR) * Math.cos(lat1Rad),
    Math.cos(dOverR) - Math.sin(lat1Rad) * Math.sin(lat2Rad)
  );

  return {
    lat: radToDeg(lat2Rad),
    lon: radToDeg(lon2Rad)
  };
}

// 计算四个顶点
const pointA = startPoint;
const pointB = getDestination(pointA.lat, pointA.lon, initialBearing, sideLength);
const pointC = getDestination(pointB.lat, pointB.lon, initialBearing + 90, sideLength);
const pointD = getDestination(pointA.lat, pointA.lon, initialBearing + 90, sideLength);

// 闭合的正方形顶点数组
const squareGeoVertices = [pointA, pointB, pointC, pointD, pointA];

console.log('地理坐标正方形顶点：', squareGeoVertices);

注意事项 #

• 平面坐标系中，若需要顺时针生成正方形，只需将旋转方向改为顺时针（角度减去90度，对应偏移量符号调整）；
• 地理坐标中，3km属于小范围，计算误差可忽略；若范围更大，建议使用更精确的椭球模型计算；
• 你提到的“90度角度”如果是指初始边的参考夹角，只需替换代码中对应的角度参数即可。

内容的提问来源于stack exchange，提问作者Piyush