在Canvas中绘制Geojson数据

梅花十三儿

于 2023-03-01 22:24:11 发布

阅读量639

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/129291310

版权

本文介绍了在地图开发中如何处理Geojson数据并在Canvas中进行绘制。内容包括需求分析、数据处理（经度纬度拆分、计算缩放比例和偏移度）、使用Canvas进行绘制的步骤，以及在实际应用中可能遇到的问题。文章最后提到了一篇关于Vue开发技巧的总结文档。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求分析

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

最低0.47元/天解锁文章