在Canvas中绘制Geojson数据

原创

已于 2022-11-16 17:14:42 修改 · 469 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2022-11-16 17:13:08 首次发布

该博客讲述了在前端开发中如何处理Geojson数据，并在Canvas上进行地图绘制的需求分析和实现过程。主要内容包括经度纬度的拆分、计算缩放比例和偏移度、对Coordinates进行缩放，以及在Canvas上的绘制操作。文章指出，由于地图轴与屏幕轴的差异，需特别处理坐标转换，同时在绘制时存在无法区分多边形大小的问题，适合用于绘制地图缩略图。

需求分析

在做地图开发的时候遇到一个需求，是在 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],
  ],
];

需求分析：

显示在 canvas 的中间
地图 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: []

最低0.47元/天解锁文章