087：vue+leaflet 自定义添加地图网格线

已于 2024-05-10 21:02:01 修改
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet网格线 leaflet教程 leaflet示例 大剑师 leaflet入门教程
于 2023-02-22 17:46:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129167393
本文由大剑师兰特撰写，详细介绍了如何在Vue和Leaflet结合的项目中自定义添加地图网格线。通过提供的示例源代码和配置步骤，读者可以在2分钟内实现相同效果。此外，还提供了相关文章参考链接，帮助读者深入学习。

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 087个示例

文章目录

一、示例效果图

二、示例简介

本示例的目的是介绍演示如何在vue+leaflet中自定义添加地图网格线。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果.

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/4190537826
或者同样查看：https://blog.youkuaiyun.com/cuclife/article/details/126745283
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

安装插件

npm install --save leaflet-auto-graticule

四、示例源代码（共76行）


                

                
                
        

         

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
使用Leaflet自定义添加地图网格线的JavaScript

				
			

			

				

					laugh666的博客
				

				

					08-16
					
					459
					
				

			

		

		

			
				
随着互联网和地理信息系统的发展，地图应用在我们的生活中扮演着越来越重要的角色。而在地图应用中，网格线往往是一种非常有用的工具，它可以帮助我们更好地定位和测量地理位置。函数使用地图的边界框来计算网格线的起点和终点，并根据指定的宽度和高度循环创建垂直和水平的网格线。然后，在JavaScript代码中，使用Leaflet库创建一个地图实例，并将其显示在指定的容器中。接下来，我们需要编写一些JavaScript代码来创建地图和添加网格线。以上代码中，我们使用Leaflet库创建了一个带有网格线的地图。

			
		

	



                

            
              



	

		

			

				
					
Leaflet中使用Leaflet.Graticule插件实现添加矩形格网

				
			

			

				

					BADAO_LIUMANG_QIZHI的博客
				

				

					04-06
					
					1014
					
				

			

		

		

			
				
场景

Leaflet快速入门与加载OSM显示地图：

https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/122290880

在上面加载地图显示的基础。

格网，即按照一定纵横坐标在地图上绘制的格网。格网是地图上不可缺少的要素之一，最常见的为地理坐标网，即经纬线的投影图形。

插件地址：

https://github.com/turban/Leaflet.Graticule

注：



博客：https://blog.youkuaiyun.com.

			
		

	



              


  
              

                


	

		

			

				
					
vue+leaflet笔记之地图网格

				
			

			

				

					fungis
				

				

					06-30
					
					4074
					
				

			

		

		

			
				
本文介绍了Web端使用Leaflet开发库显示地图经纬网和标准图幅网格的方法。地图格网是由间隔均匀的横向线和纵向线组成的网络，用于在地图上识别各个位置。 经纬网通过在地图上描绘纬度和经度格网，用于表示地图的地理坐标；标准图幅网格通过在地图上展示不同比例尺下的网格图幅号与点击查询地图范围，用于描绘地图的位置、比例尺等信息。

			
		

	





	

		

			

				
					
使用 Vue 和 OpenLayers 在地图上添加网格线

				
			

			

				

					TechNovaX的博客
				

				

					08-12
					
					621
					
				

			

		

		

			
				
在上面的代码中，我们创建了一个名为 “Map” 的 Vue 组件，并在其中使用 OpenLayers 初始化了一个地图。在循环中，我们以一定的间隔在水平和垂直方向绘制线条，并将其添加到源中。通过这种方式，您可以为您的地图应用程序提供更多辅助线条，以提高用户体验和功能性。要在您的应用程序中使用此组件，只需在其他组件中导入它并将其添加到模板中即可。现在，当您运行您的 Vue 项目时，应该会显示一个包含网格线的地图。以上就是如何使用 Vue 和 OpenLayers 在地图上添加网格线的示例代码和说明。

			
		

	



		

			
		



	

		

			

				
					
leaflet自定义地图（非地理地图）

				
			

			

				

					MYNAMEL的博客
				

				

					12-30
					
					2374
					
				

			

		

		

			
				
地理地图：现实世界的地图
啥叫非地理地图？真实世界不存在的地图
一般我们的地图不都是以地球上的坐标啊，建筑啊来参考的嘛（经纬度）
但是比如说吃鸡，cf这种地图就不在地球上，不能用地理地图来显示，这个时候，我们就要自定义一个地图，懂？

非地理地图代码和相关背景图
文件夹结构

html代码
<html>

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.c.

			
		

	





	

		

			

				
					
111：vue+leaflet自定义绘制，画多边形、折线、圆形、marker、矩形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-05
					
					1818
					
				

			

		

		

			
				
第111个本示例的目的是介绍演示如何在vue+leaflet中自定义绘制工具，可以画多边形、折线、圆形、marker、矩形。

			
		

	





	

		

			

				
					
136：vue+leaflet：个性化配置，利用Leaflet-Geoman绘制多种图形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					11-10
					
					1253
					
				

			

		

		

			
				
第136个本示例的目的是介绍演示如何在vue+leaflet中个性化配置，利用Leaflet-Geoman绘制多种图形。灵活地配置Leaflet-Geoman的属性，可以产生各种美妙的绘图效果。

			
		

	





	

		

			

				
					
143：vue+leaflet 在25833投影坐标下，加载一小块图像叠层数据

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-08
					
					892
					
				

			

		

		

			
				
本示例是介绍如何在vue+leaflet, 自定义CRS，形成新的投影，这里是25833投影，并使用 L.Proj.imageOverlay的方法在地图上加载载一小块图像叠层数据。

			
		

	





	

		

			

				
					
074：vue+leaflet 添加zoomslider，控制zoom放大缩小

				
			

			

				

					大剑师兰特的GIS世界
				

				

					02-16
					
					1075
					
				

			

		

		

			
				
第074个本示例的目的是介绍演示如何在vue+leaflet中使用zoomslider，相比于普通的zoom控件，这个更加形象，更加具体些。

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					Appleyk的专栏
				

				

					10-22
					
					3万+
					
				

			

		

		

			
				
基于leaflet封装的带经纬度数值标注的经纬度（瓦片）网格线绘制插件，可自定义线和标注的颜色及显示方位！

			
		

	





	

		

			

				
					
Leaflet.Graticule:经纬线网格

				
			

			

				

					05-22
				

			

		

		

			
				
小叶
生成纬度和经度线的刻度网格。
原料药
L.graticule(options)
 创建一个新的Graticule图层，该图层继承自L.GeoJSON 。 选项是具有以下属性的可选选项对象：
 interval ：每条刻度线之间的interval ，以度为单位
style ：生成线的
例子
 // Add a basic graticule with divisions every 20 degrees
// as a layer on a map
L . graticule ( ) . addTo ( map ) ;
// Specify divisions every 10 degrees
L . graticule ( { interval : 10 } ) . addTo ( map ) ;
// Specify bold red lines instead of thin g

			
		

	





	

		

			

				
					
Leaflet.VectorGrid:在Leaflet 1.0.0中显示网格化的矢量数据（切片的GeoJSON或protobuf矢量切片）

				
			

			

				

					05-11
				

			

		

		

			
				
Leaflet.VectorGrid
 在 1.0.0中显示网格化的矢量数据（切片的 ， 或）
演示版
 切片的GeoJSON
 切片的TopoJSON（对后空混乱感到抱歉，topojson-to-geojson似乎无法正确处理）
 Protobuf矢量图块：OpenMapTiles，MapBox，MapZen甚至ESRI矢量图块
 可点击的点和线
 点作为图标
使用
如果您使用npm ：
	npm install leaflet.vectorgrid
 这将使两个文件可用： dist/Leaflet.VectorGrid.js和dist/Leaflet.VectorGrid.bundled.js 。
 区别在于dist/Leaflet.VectorGrid.bundled.js包含所有VectorGrid的依赖项：
  （在ISC许可下）
  （在BSD许可下）
  （在BSD许可下）


			
		

	





	

		

			

				
					
Leaflet.CanvasLayer.Field:在Leaflet中加载和设置栅格文件样式（geotiff和asciigrid）

				
			

			

				

					05-06
				

			

		

		

			
				
IH.Leaflet.CanvasLayer.Field
 的插件，可添加图层以可视化ASCIIGrid或GeoTIFF文件（EPSG：4326）中的字段（ aka Rasters ）。
警告！ npm安装的新网址
npm install ih-leaflet-canvaslayer-field
 这包括：
 L.CanvasLayer.ScalarField可以使用不同的色标和箭头渲染的“典型”栅格图层（来自标量，例如DTM，温度...）。
 L.CanvasLayer.VectorFieldAnim表示矢量场（风，水流等）的动画层，基于Cameron Becarrio的出色
该插件扩展了Stanislav Sumbera的 Leaflet插件，并使用了Fabian Schindler的 。 对于“箭头”渲染器，它包括Stuart Matthews修改过的。
演示版
下图显示了三个基本层

			
		

	





	

		

			

				
					
Leaflet.canvasdraw:在 2d 画布层上绘图（用于栅格）

				
			

			

				

					06-20
				

			

		

		

			
				
Leaflet.canvasdraw
 在 2d 画布层上绘图（用于栅格）

			
		

	





	

		

			

				
					
地图信息 leaflet +vue3 一个文档让你掌握leaflet基础用法

				
			

			

				

					qq_59598977的博客
				

				

					01-26
					
					7455
					
				

			

		

		

			
				
leaflet基本用法，事件，图层，Geo数据

			
		

	





	

		

			

				
					
049：vue+openlayers 鼠标pointermove显示城市名片

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-14
					
					2679
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。

			
		

	





	

		

			

				
					
Vue实现画布网格

				
			

			

				

					qq_34190382的博客
				

				

					04-24
					
					1017
					
				

			

		

		

			
				
【代码】Vue实现画布网格。

			
		

	





	

		

			

				
					
vue2高德地图地图分幅网格

				
			

			

				

					weixin_44309299的博客
				

				

					04-09
					
					1605
					
				

			

		

		

			
				
【代码】vue2高德地图地图分幅网格。

			
		

	





	

		

			

				
					
leaflet 矢量 经纬网格

				
			

			

				

					u012123612的博客
				

				

					12-17
					
					3394
					
				

			

		

		

			
				
1. 绘制需求

1）每层级网格像素大小不变，即每层级，网格经纬度距离加密一次；

2）页面顶部和右侧标注经度、纬度值；

3）经纬度值精度随层级变化；

4）尽量避免显示区域外的多余绘制，同时保证拖动时不会出现没有网格的情况；



2. 代码实现

1）确定网格线间隔，经线范围：-180~180；纬线：-90~90；

间隔值应当为180、90的公约数，这样能保证过0°经线；比如：

1级：-180、-90、0、90、180

2级：-180、-135、-90、-45、0、45、90、...

			
		

	





	

		

			

				
					
vue+leaflet+地图瓦片

					
最新发布

				
			

			

				

					12-22
				

			

		

		

			
				
Vue.js 和 Leaflet 结合可以创建动态的地图应用。Leaflet 是一个轻量级的 JavaScript 地图库，适合用于前端开发，而 Vue 是一款强大的渐进式框架，能够帮助管理组件状态和视图。  在 Vue + Leaflet 的组合中，你可以...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
还是大剑师兰特

			
打赏一杯可口可乐

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值