在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].r