根据经纬度绘制canvas图形

在工作的过程中，碰到了一个需求：需要根据后台传回来的坐标值在页面上绘制相应图形。查了一下发现这方面的资料挺少的，在这里做个简单的模型供大家参考。

结果如图所示（左侧是原标记点，右侧是绘制出来的图形）

给两个说明：
纬度—lat----x轴—小
经度—lon—y轴—大

下面直接上代码

<canvas id="posiToShape" width="300" height="300" style="border: 1px solid black;"></canvas>
<script>
  // 模拟后台返回的原始数据
  const positions = "30.016935735102095,119.9272602936253|30.058816978170853,119.96191458863905|30.026739314910962,120.05867212254088|30.00564556702473,119.97941329012974";

  // canvas元素对应的宽高
  let canvasHeight = 300, canvasWidth = 300;

  // 进行一系列处理，目的是得到各个方向轴的最大最小值，朋友们的处理方式应该和我不同
  let amuArr = positions.split(/,|\|/g);

  // amuXArr: ["30.016935735102095", "30.058816978170853", "30.026739314910962", "30.00564556702473"]
  let amuXArr = amuArr
    .filter((_, index) => {
      return index % 2 == 0;
    })

  // amuYArr: [-119.9272602936253, -119.96191458863905, -120.05867212254088, -119.97941329012974]
  let amuYArr = amuArr.filter((_, index) => {
    return index % 2 != 0;
  })
    // 注意：y轴需要进行取负操作
    .map((item) => {
      return item * -1;
    });

  // 拿到方向轴的最大最小值
  let xMax = Math.max(...amuXArr);
  let xMin = Math.min(...amuXArr);
  let yMax = Math.max(...amuYArr);
  let yMin = Math.min(...amuYArr);

  // 根据canvas宽高计算缩放级别
  let xScale = canvasWidth / (xMax - xMin);
  let yScale = canvasHeight / (yMax - yMin);
  let scale = xScale < yScale ? xScale : yScale;

  // 计算偏移量
  let xoffset =
    (canvasWidth - (xMax - xMin) * scale) / 2;
  let yoffset =
    (canvasHeight - (yMax - yMin) * scale) / 2;

  let canvas = document.getElementById('posiToShape');
  let ctx = canvas.getContext('2d');

  // 由于canvas坐标轴与经纬度不相同，所以需要平移原点并旋转画布
  ctx.translate(0, canvasHeight);
  ctx.rotate(-Math.PI / 2);
  ctx.beginPath();

  // 根据偏移量移动点位并画图
  ctx.moveTo(
    (amuXArr[0] - xMin) * scale + xoffset,
    (yMax - amuYArr[0]) * scale + yoffset
  );
  for (let i = 1; i < amuXArr.length; i++) {
    ctx.lineTo(
      (amuXArr[i] - xMin) * scale + xoffset,
      (yMax - amuYArr[i]) * scale + yoffset
    );
  }
  ctx.closePath();
  ctx.stroke();
</script>

还有一些操作比如说给canvas加边距，更改显示的样式等都可以以此为基础，根据实际需求进行调整。