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

appleyk

已于 2022-12-23 10:17:27 修改

阅读量3.4w

点赞数 3

分类专栏： WebGis 文章标签： Graticule 经纬线格网经纬线网格经纬度线 leaflet瓦片格网

于 2022-10-22 22:55:43 首次发布

本文链接：https://blog.csdn.net/Appleyk/article/details/127468947

版权

WebGis 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

一、先看效果

经纬线网格插件测试

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

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

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

3、第2条行不通后，你就要考虑使用瓦片格网（每张瓦片都是正方形，距离等分）的方式来绘制，即通过视窗map的bounds来计算出当前zoom下瓦片的row和col值，然后通过gis数学公式反算每个格子的经纬度，经纬度有了后就好办了，直接使用leaflet的api绘制相应的要素图层和标注即可！

4、当然考虑这些是远远不够的，你要做的是一个公共插件（或者称作是模块或组件），那就要符合npm模块的标准，比如怎么构建一个标准的模块项目，怎么配置webpack？怎么编译代码？怎么打包？怎么推送到npm仓库？后期怎么更新？如果用了阿里的镜像仓库，却发现别人怎么都拿不到最新推上去的包该怎么办？等等，这些问题你都要轻车熟路。而整个npm模块包的构建和推送是有一套流程的，比如像下面这种我整理的：

5、知道了怎么构建npm模块包后，你最后要做的就是编写好代码，让别人在自己的项目中下载了你的插件后，只需要简单引入一下依赖，简单敲几行代码就可以实现他们想要的功能。这种简单背后的工作是大量的代码封装，即你要把变化的东西全部封装起来（变化的部分可提供默认值），然后将变化的属性通过API方法的形式暴露给调用方，由调用方很灵活的去设置以达到他们想要的绘制效果。比如经纬线的颜色、宽度等，经纬（度数值）标注的颜色和字体大小等，以及标注显示的方位等。我们将其封装到具体的实现（绘制插件）类中，然后通过下面的方式让使用者去用：