在Canvas中绘制Geojson数据

需求分析

在做地图开发的时候遇到一个需求，是在 canvas 中绘制 Geojson 数据

数据格式为 EPSG:4326 的 Polygon：

• 三维数组
• 每一项都是由经纬度组成的
• 第一个点和最后一个点相同，表示 Polygon 是闭合的

[
  [
    [109.54420471485196, 35.76192112844663],
    [109.54423617129702, 35.76132766033574],
    [109.54539219590997, 35.76155739029704],
    [109.54521918540507, 35.76241249100947],
    [109.54420471485196, 35.76192112844663],
  ],
];

需求分析：

1. 显示在 canvas 的中间
2. 地图 y 轴和屏幕的 y 轴是相反的，绘制出来的 Polygon 不能和实际反过来
   • 屏幕的原点在左上角，地图的原点在左下角

数据处理

width 和 height 是 canvas 的宽高

将经度和纬度单独拆分出来

const getLongitudesAndLatitudes = (coordinates: number[][][]) => {
   
  return coordinates[0].reduce(
    (pre, cur) => {
   
      pre.longitudes.push(cur[0]);
      pre.latitudes.push(cur[1]);
      return pre;
    },
    {
    longitudes: [] as number[], latitudes: [] as