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

2023-05-16

一、先看效果


经纬线网格插件测试


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

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

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

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

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

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



二、编写插件

核心插件类如下:


核心脚本如下:


三、编写插件测试案例

配置开发环境下的webpack5


 借助react在public目录下编写测试用例以检验插件功能是否可用

使用默认参数的效果 


使用自定义参数的效果(插件随时可以基于业务需要进行升级迭代,暴露出更多api出来)


四、推送包到NPM公仓

推送成功之后,任何人都可以基于keywords在npm全库中搜索到我们的插件信息



 等等..... ..... .....


五、如何使用该插件?

具体怎么用,可以参考Gitee:https://gitee.com/appleyk/leaflet-lonlat-gridlines-test


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • C++11常见编译与链接错误解决总结

    目录 一 C 43 43 11 常见编译问题 1 1 error no matching function for call to 1 2 39 xxxx 39 was not declared in this scope 1 3 ambi
  • Android获取唯一设备号

    TelephoneManager mgr 61 getSystemService Context TELEPHONY SERVICE xff08 权限 xff1a lt uses permission android name 61 34
  • 记录一下我在做公司后台管理系统的难点与心得

    公司的项目大致就长这个样子 刚进入页面的时候是两个请求 xff0c 左侧的内容跟右侧的内容分别是两个不同的请求 xff0c 这里我使用的是aioxs的并发请求 xff0c axios all axios提供了两个并发请求 axios all
  • 使用vue二次开发海康监控H5视频播放

    使用vue二次开发海康监控H5视频播放 西瓜播放器示例demo阿里云的示例demo使用海康的H5视频开发包 xff0c 海康的api页面中的使用第一步第二步第三步第四步 切记bug 由于公司项目需要做监控的直播跟回放 xff0c 所以接触到
  • 数字动态翻牌器

    数字动态翻牌器 最近项目里使用到了数字翻牌器 xff0c 于是自己写了一个 xff0c 动态的翻牌器 第一步创建一个组件页面 xff0c NumberCount vue 思路 xff1a 大概就是显示几位数 xff0c 然后从0开始滚动到当
  • 记录openLayers的学习日记

    因为在公司做项目一直用到了gis地图 xff0c 我又不太会 xff0c 所以就进行学习一下 xff0c 顺便记录一下吧 xff0c 哈哈哈 xff0c 共勉 简介 什么是openLayers xff0c 他就是一个用来帮助我们进行Web地
  • 基于vant UI设计一个下拉选择跟搜索功能的组件

    theme smartblue 简介 xff1a 这个是基于 vant3 0跟vue3 0的项目 xff0c 在开发中封装的一个组件 效果图 xff1a 组件功能 1 组件的下拉框数据进行排序从小到大 xff0c 分别为四个字体及以下 xf
  • SpringBoot -- 软件许可(License)证书生成+验证+应用完整流程

    一 项目目录树结构 由于时间有限 xff0c 不可能在博客上花太多时间 也不可能每一个细节都说的很细 xff0c 所以 xff0c 下面的内容虽然一时间看着比较懵 xff0c 但是文末有项目的GitHub地址 xff0c 或者不懂的可以留言
  • 让开发事半功倍的VueUse

    什么是VueUse VueUse不是Vue use xff0c 它是为Vue 2和3服务的是一组基于Composition API的实用函数 是目前世界上Star最高的同类型库之一 他功能丰富 xff0c 与服务器端渲染 生成完美配合 xf
  • bebian修改菱形乱码

    由于安装debian使用了最小安装 xff0c 默认用中文安装 xff0c 但内核没有中文字库 xff0c 导致某些字符显示为乱码 xff08 菱形 xff0c 方块 xff09 解决方法 xff1a 重新设置locale xff0c 使用
  • Ubuntu16.04迁移系统(系统备份与还原),亲测可行

    一 写在前面 由于linux的核心思想是 一切皆文件 xff0c 所以我们通过拷贝所有系统文件的方式来备份及恢复系统 我的Ubuntu系统通过UEFI的方式启动 xff0c 如果不清楚启动方式请自行查询UEFI 43 GPT和BIOS 43
  • Android Q(10.0)上IMEI获取不到;Android Q(10.0)上OAID替代IMEI;OAID获取方式

    最近公司研发的 Android Q xff08 android 10 xff09 的5G手机 xff0c 然后就开始适配Android Q xff1b 发现无系统权限的应用无法获取到可作为唯一标识的IMEI MAC等等 xff1b 由于项目
  • Windows动态链接库(dll)浅析 - 2

    Windows动态链接库 xff08 dll xff09 浅析 2 Windows动态链接库 xff08 dll xff09 浅析 1Windows动态链接库 xff08 dll xff09 浅析 3 5 DLL的编写 5 1 一个简单的d
  • Linux内存回收与swap

    在Linux系统中 xff0c 每个进程都独有一个虚拟地址空间 xff08 Virtual Address Space xff09 xff0c 由内核维护内存映射 为完成内存映射 xff08 虚拟内存地址映射到物理内存地址 xff09 xf
  • haproxy stats enable功能详解

    stats enable是haproxy通过WEB界面进行统计数据展示的功能 xff0c 通过WEB界面可以查看到haproxy当前运行状态的一些数据 xff0c 合理配置的情况下 xff0c 还可以通过WEB界面调整某个后端服务器的状态
  • 软件中的版权声明

    参考 xff1a 1 关于网站版权声明 Copyright 的格式和写法 2 软件Copyright中年份有什么意义 xff1f 格式 xff1a Copyright dates by author owner 典型说明如下 xff1a C
  • 脚本设置环境变量

    1 set方式设置 这种方式设置方法见 xff1a cmd 环境变量设置方法详细解释 但这种方式有个问题 xff0c 就是只针对当前窗口的临时的方式 xff0c 一旦该窗口关闭 xff0c 将丢失 无法永久设置到系统的环境变量中 说明 xf
  • 【第2章】Seata1.3.0源码编译+参数配置+启动运行(超详细)

    一 序言 本来想用一天时间更完的 xff0c 后来写完才发现 xff0c 我去 xff0c 想的太简单了 xff0c 草率了草率了 xff1b 由于强迫症的原因 xff0c 再加上平时要搞其他的 xff0c 结果就导致我花了近3天的碎片时间
  • 电脑中的睡眠、休眠和关机有什么区别?

    睡眠 xff1a 将当前电脑的工作和状态保存在硬盘和内存中 xff0c 下次启动就可以快速从内存读取信息 xff0c 恢复到之前的状态 此时内存是通电的 xff0c 耗费少量电源 休眠 xff1a 将当前电脑的工作和状态保存在硬盘中 xff
  • win10电脑怎么设置不休眠?win10电脑设置不休眠的方法

    win10电脑怎么设置不休眠 xff1f win10电脑设置不休眠的方法

随机推荐

  • C#中byte数组与Int,float等类型的相互转换问题

    都是用类BitConverter完成 xff0c 该类定义了一组静态函数实现双向转换 xff0c 位于System下 这里涉及双向转换问题和大小端转换的问题 xff08 1 xff09 float int等类型转bytes数组 使用 xff
  • 【WPF】Image控件锯齿问题

    1 现象 xff1a 使用Image控件显示图片 xff0c 对于灰度的一个图片 xff0c 发现出现了锯齿 xff0c 在灰度逐渐减淡的地带 xff0c 出现了类似于马赛克的锯齿过度 2 解决方法 在网上找了下原因 xff0c 最终发现是
  • 运行exe失败:应用程序无法启动,并行配置不正确

    0参考 1 Setting win7下运行exe失败 应用程序无法启动 xff0c 因为应用程序的并行配置不正确 1 现象 win10下 xff0c 之前运行很好的程序 xff0c 因为异常退出 再次打开该程序时 应用程序无法启动 xff0
  • 【WPF】UIElement的单双击事件支持

    UIElement包含很多个控件 xff0c 包括Border xff0c Grid等 xff0c 但这个里面只有支持鼠标的按下抬起等 xff0c 并没有一个专门的支持click和doubleclick这样的事件 具体见UIElement
  • 【WPF】后台线程(包括串口等设备线程)安全的访问前台UI元素

    问题描述 写的一个程序 xff0c WPF界面 xff0c 与串口 相机等硬件设备通信 xff0c 并将通信结果 xff08 包括图片等 xff09 显示在UI界面上 期间发现有串口被其他线程占用 xff0c 在Debug模式下关闭程序后
  • [WPF]UIElement被按下不同时间时实现不同的响应

    问题起源 起源于想在用户单击一个button时实现如下效果 xff1a xff08 1 xff09 当用户单击时 xff0c 发出一个指令A xff08 2 xff09 如果用户将button按下 xff0c 保持一段时间 xff08 如2
  • C#程序启动和关闭外部程序

    参考 xff1a 1 C 启动外部程序的几种常用方法汇总 2 C 调用exe程序总结 3 MSDN文档 xff1a Process 类 4 C 进程Process基本的操作说明 5 C 操作进程 Process 1 方法 主要使用Proce
  • C#向自己调用的c++Dll传递回调函数及其调用

    参考 xff1a 1 c 调用c 43 43 带有回调函数方法的实现 1 目的及方法 C 程序调用了一个C 43 43 的dll xff0c 向给dll传递一个回调函数 xff0c 供dll在一定时机回调C 中的程序执行 方法见参考 1 2
  • SSO单点登录前后端分离完整版·(开源)

    前言 xff1a 3月建的仓 xff0c 完成确是在7月中旬 xff0c 实际完成时间加起来不到10天 xff0c 中间停滞了很久 xff0c 主要工作太忙 xff0c 白天没时间搞 xff0c 况且工作摸鱼也不是我的作风 xff0c 晚上
  • 四种常见软件开源协议介绍-GPL、LGPL、BSD、Apache

    转自 xff1a https baijiahao baidu com s id 61 1603028095502634219 amp wfr 61 spider amp for 61 pc 软件开源是许多软件企业需要关注的问题 xff0c
  • opencv及其在c#中调用

    1 opencv简介 OpenCV Open Source Computer Vision Library 是一个 开源免费 发行的跨平台计算机视觉库 xff0c 可以运行在Linux Windows Android ios等操作系统上 x
  • [python]conda升级中的几个问题

    1 PermissionError Access is denied 在进行升级conda操作时 xff0c 提示上面的错误 升级操作为 xff1a conda update conda 就是权限的问题 xff0c 解决方法 xff1a 使
  • 【python】语言及第三方库帮助文档

    目录 1 python2 NumPy3 Spicy4 Matplotlib5 Tensorflow6 WSGI7 Flask框架8 Spyder 1 python 分python2和python3 xff0c 两者差异较大 python3的
  • [python]Python中使用WSGI和Flask进行web通信

    通信方法和示例 主要利用WSGI进行 xff0c 此外 xff0c 在WSGI之上 xff0c 还可以结合Flask框架完成 关于二者的介绍 教程和示例等参见 xff1a https blog csdn net kevinshift art
  • [python]语法要点与技巧

    文章目录 1 With As语句2 字符串操作2 1 查找2 2 替换2 3 切片2 4 各种操作 3 数据类型及其定义3 1 标准数据类型3 2 三种符号的应用3 3 列表 字典 集合定义3 4 变量 对象 类与类型3 5 字符串格式化
  • 【opencv】文档及使用

    帮助文档 1 xff0c Opencv 3 0官方帮助文档 https docs opencv org 3 0 beta 2 OpenCV各版本官方文档 https docs opencv org 4 1 0 https docs open
  • python下的opencv

    1 识别轮廓 findcontours https blog csdn net m0 37706703 article details 81081352 轮廓及其各种特性 https blog csdn net kwame211 artic
  • TensorFlow库及API

    1 很好的一个介绍 https blog csdn net g6u8w7p06dco99fq3 article details 94241399 2 tf slice https www jianshu com p 71e6ef6c121b
  • C#调用python程序

    四种方法 xff1a https blog csdn net qq 42063091 article details 82418630 其中 制作Exe xff0c 使用pyinstaller xff0c 具体参见文章 xff1a http
  • 基于leaflet编写的经纬线网格绘制react插件

    一 先看效果 经纬线网格插件测试 业务场景就是通过开关来控制经纬线格网图层在地图上的显示与关闭 xff0c 且开启时 xff0c 随着地图的移动 xff08 视窗发生了改变 xff09 xff0c 网格图层也要相应的实时清除和重绘 这个功能