基于leaflet编写的经纬线网格绘制react插件

本文详述了如何开发一个Leaflet地图插件,用于在地图上动态显示经纬线网格,并探讨了Web墨卡托投影下的网格绘制问题。文章涵盖了插件设计、瓦片格网计算、模块化构建以及npm包发布等全过程,同时提供了测试案例和使用指南。

一、先看效果


经纬线网格插件测试


        业务场景就是通过开关来控制经纬线格网图层在地图上的显示与关闭,且开启时,随着地图的移动(视窗发生了改变),网格图层也要相应的实时清除和重绘。这个功能看似简单,实则操作起来还是有很多需要注意的地方:

        1、首先你得对leaflet api 有所了解甚至是熟练使用常用的对象和函数; 

        2、其次你要考虑到Web墨卡托投影下纬度间隔从赤道向两极是逐渐增大的,即越往极地地区,区域面积是被拉伸(变大)的,所以不能按照纬度等分去绘制不同zoom下的格网的,如果这样绘制,效果就像下面这样的,这显然不太符合实际情况。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值