OpenLayers6入门，OpenLayers6地图缩放控件、比例尺控件和鼠标经纬度位置

原创 已于 2024-03-05 10:11:52 修改 · 1.6k 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#javascript #OpenLayers #地图缩放控件 #比例尺控件 #鼠标经纬度

于 2023-04-13 16:59:33 首次发布
本文是OpenLayers6入门教程的一部分，讲解如何在地图上添加地图缩放控件、比例尺控件以及显示鼠标经纬度的位置功能。在vue项目中集成OpenLayers6，并提供了相关代码实现和测试效果演示。

专栏目录：
OpenLayers6入门教程汇总目录

前言

使用OpenLayers6在地图上添加地图缩放控件，地图比例尺控件和鼠标经纬度位置展示控件。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
Openlayers6入门，Openlayers调整中心点坐标、Openlayers调整缩放级别、Openlayers调整地图可视角度和地图复位

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					07-25
					
					2269
					
				

			

		

		

			
				
本章介绍一下Openlayers最基础的调整中心点坐标方式、调整缩放级别、调整地图可视角度和地图复位的小功能示例，非常简单，可直接上手。

			
		

	



                

            
              



	

		

			

				
					
Openlayers实战：个性化比例尺

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-04
					
					673
					
				

			

		

		

			
				
Openlayers地图中，比例尺经常会用到，所以在我们的实战课程里，详细讲一下其用法，个性化其样式。

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers6.rar

				
			

			

				

					04-03
				

			

		

		

			
				
这个文件中包含了 Openlayers6.2.1 版本的部分功能示例代码，详细教程请参考文章：https://blog.youkuaiyun.com/Supreme_Sir/article/details/105123438

			
		

	





	

		

			

				
					
openlayers-04-地图控件

				
			

			

				

					chuanren1991的博客
				

				

					05-15
					
					639
					
				

			

		

		

			
				
ol提供的地图控件比较常用的包括：鼠标位置、比例尺、鹰眼、图层缩放滑块。注释中有详细的介绍，不再赘述，有问题留言吧。直接通过代码来讲解体会一下会更加直观。

			
		

	



		

			
		



	

		

			

				
					
OpenLayer-地图控件操作

				
			

			

				

					zhushanlin的博客
				

				

					04-27
					
					383
					
				

			

		

		

			
				
示例 ：实现底图的放大缩小平移和复位。

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：在地图上添加缩放控件、比例尺控件和鼠标经纬度位置显示控件

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					01-25
					
					501
					
				

			

		

		

			
				
本章主要介绍如何使用OpenLayers7在地图上添加地图缩放控件，比例尺显示控件和鼠标经纬度位置展示控件这三个Control控件。

			
		

	





	

		

			

				
					
16-openlayers地图缩放控件、比例尺控件、鼠标经过地图显示经纬度控件

				
			

			

				

					fxshy的博客
				

				

					05-15
					
					278
					
				

			

		

		

			
				
15-openlayers地图缩放控件、比例尺控件、鼠标经过地图显示经纬度控件

			
		

	





	

		

			

				
					
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					05-29
					
					1836
					
				

			

		

		

			
				
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

			
		

	





	

		

			

				
					
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					10-31
					
					4933
					
				

			

		

		

			
				
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。

> 本专栏源码是由OpenLayers结合Vue框架编写。
> 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。

			
		

	





	

		

			

				
					
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					04-14
					
					2723
					
				

			

		

		

			
				
通过使用OpenLayers的Draw模块实现在地图上绘制线段、圆形和多边形（三角形、矩形等多边形）。

			
		

	





	

		

			

				
					
Openlayers 简单实例6

				
			

			

				

					11-03
				

			

		

		

			
				
Openlayers 简单实例6 距离面积量算2

			
		

	





	

		

			

				
					
OpenLayers_6.1.0.zip

				
			

			

				

					08-17
				

			

		

		

			
				
OpenLayers 是一个专为WebGIS 客户端开发的JavaScript 类库包，用于实现对相关地图的操作展示，目前最新版本为Openlayers6，本文的版本为Openlayers6.11版本；

			
		

	





	

		

			

				
					
OpenLayers之加载缩放控件

				
			

			

				

					SmileCoffin的博客
				

				

					01-20
					
					4284
					
				

			

		

		

			
				
1、一般的地图打开都有放大、缩小和全图的导航条，以便于用户对地图的查看，下面我们将在OpenLayers中实现这一功能；
2、在之前创建的空白站点下面新建一个html的页面，引入ol.js和ol.css文件，然后在body标签中创建一个div，作为地图加载的容器；
3、代码实现




    加载并显示OSM地图
    
    
    
        #map .ol-zoomsl

			
		

	





	

		

			

				
					
OpenLayers6入门，Openlayers通过计算matrixIds和resolutions方式加载WMTS地图服务，不需要解析WMTSCapabilities文档方式加载WMTS地图服务

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					05-29
					
					1129
					
				

			

		

		

			
				
在此之前，博主已经写过《OpenLayers通过WMTSCapabilities.xml加载GeoServer发布的标准wmts地图服务》，但是有些地图服务发布的有问题，导致WMTSCapabilities.xml解析失败，就无法正确读取到地图服务的相关信息，这种时候可以采用本章所讲的这种方案进行加载WMTS地图服务。

			
		

	





	

		

			

				
					
openlayers学习之路（二）——地图控件

				
			

			

				

					不去想结果，一直在路上
				

				

					10-27
					
					845
					
				

			

		

		

			
				
ol



			
		

	





	

		

			

				
					
Openlayers基础知识回顾（六）

					
最新发布

				
			

			

				

					qq_45751819的博客
				

				

					12-19
					
					579
					
				

			

		

		

			
				
隐藏

			
		

	





	

		

			

				
					
Openlayers6 图形绘制和修改功能（结合React）

				
			

			

				

					weixin_44242600的博客
				

				

					08-08
					
					2110
					
				

			

		

		

			
				
通过使用openlayers的`ol.interaction.Draw`和`ol.interaction.Modify`模块实现地图上绘制圆形、矩形、多边形并修改编辑。

			
		

	





	

		

			

				
					
openlayers3添加地图控件

				
			

			

				

					weixin_33929309的博客
				

				

					07-16
					
					367
					
				

			

		

		

			
				
//添加属性控件
map.addControl(new ol.control.Attribution());
//添加鼠标定位控件
map.addControl(new ol.control.MousePosition({
 undefinedHTML: 'outside',
 projection: 'EPSG:4326', 
 ...

			
		

	





	

		

			

				
					
openlayers [七] 地图控件controls详解

				
			

			

				

					爱玩亚索的程序员
				

				

					01-18
					
					2008
					
				

			

		

		

			
				
更多请见官网。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值