Leaflet中使用Leaflet.Graticule插件实现添加矩形格网
场景
Leaflet快速入门与加载OSM显示地图:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880
在上面加载地图显示的基础。
格网,即按照一定纵横坐标在地图上绘制的格网。格网是地图上不可缺少的要素之一,最常见的为地理坐标网,即经纬线的投影图形。
插件地址:
https://github.com/turban/Leaflet.Graticule
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、下载插件并引入
<script type="text/javascript" src="./js/L.Graticule.js"></script>
2、添加格网
L.graticule().addTo(map);
3、完整代码
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>leaflet格网控件</title><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><style>html,body,#map {padding: 0;margin: 0;width: 100%;height: 100%;overflow: hidden;}</style>
</head><body><div id="map"></div><script type="text/javascript" src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script type="text/javascript" src="./js/L.Graticule.js"></script><script type="text/javascript">var map = L.map('map').setView([36.09, 120.35], 13);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);//添加格网L.graticule().addTo(map);</script>
</body></html>
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网相关推荐
- Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
- Leaflet中使用Leaflet.AnimatedMarker插件实现要素轨迹移动
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现要素轨迹移动效果. 插 ...
- Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
- SpatialHadoop中空间索引系列之(四)空间格网索引实现
有关空间格网索引原理详见前面章节讲述的内容.这里我们根据SpatialHadoop中具体的实现,来详细讲解下.格网索引是一级索引,格网的个数取决于两个参数,一个是数据集的大小,另外一个就是格网的大 ...
- Leaflet中使用Leaflet.contextmenu插件实现地图上添加鼠标右键菜单
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样使用Leaflet.co ...
- Leaflet中使用Leaflet.Polyline.SnakeAnim插件实现水流模拟效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图 在上面的基础上怎样实现水流模拟效果. 水流模 ...
- Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 前面所引用的 ...
- Leaflet中使用Leaflet.fullscreen插件实现全屏效果
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的基础上,怎样实现地图全屏效果. ...
- Leaflet中使用leaflet.polylineDecorator插件绘制箭头线及虚线矩形
场景 Leaflet快速入门与加载OSM显示地图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础 ...
最新文章
- 在字典里添加项_Python 字典(Dictionary)
- CentOS7 minimal 没有netstat命令
- 从零开始学习Sencha Touch MVC应用之十九
- (转)Elasticsearch 聚合查询、桶聚合、管道聚合及复合查询
- 宿迁学计算机的学校,宿迁计算机学校
- 关于FlasCC(Adobe Flash C/C++ Compiler)
- Paddle实现NLP-文本分类
- 虚拟摄像头之九: IMX8Q 的 camera.imx8.hal 框架详解
- 病毒木马查杀实战第017篇:U盘病毒之专杀工具的编写
- 微信分享之分享图片/分享图标不能显示
- 无刷直流电机学习笔记1
- html5简介及常用标签
- iOS8 苹果自带的毛玻璃效果
- String字符串转JSON对象(JSON的依赖)
- JAVA SM2 数字证书生成
- linux sed 替换符号,linux sed 批量替换文件中的字符串或符号
- Android编程权威指南.第3版.pdf
- sip转webrct
- 先睹为快 | 卓越示范中心 ETB003 云原生安全实验测试床
- java守护线程与非守护线程
热门文章
- tf里面InteractivateSession()与Session()的区别
- 计算机组成原理中lad什么意思,计算机组成原理的大神们能不能帮忙做几道题啊...
- 存储过程双层循环_mysql嵌套存储过程实现循环嵌套
- vue怎么运行html,怎样运行一个vue.js项目
- 解决:Cannot resolve plugin org.apache.maven.plugins:maven-compiler-plugin:2.3.2问题
- IO流以及他们的种类区别 序列化反序列化 如何实现
- 模型部署到移动端_Pytorch1.4来了!定制移动端构建、支持分布式模型并行训练等...
- 计算机网络技术协议名词解释,网络协议名词解释
- 画出该lti系统的幅频特性响应曲线_模拟电路-放大电路的频率响应
- 已选商品数量总计如何实现_英国VAT新政临近,没有API如何添加或修改税率?教程来了!...