OpenLayers实战，OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏

最新推荐文章于 2024-05-29 20:27:13 发布
最新推荐文章于 2024-05-29 20:27:13 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： # Vue+OpenLayers6实战 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 javascript vue OpenLayers 鼠标经过点位要素事件 鼠标经过显示提示框
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/132381963
版权
OpenLayers6一本通 同时被 3 个专栏收录
132 篇文章 ¥159.90 ¥299.90
订阅专栏
Vue+OpenLayers6入门到实战
123 篇文章 ¥119.90 ¥299.90
订阅专栏
Vue+OpenLayers6实战
55 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍如何使用OpenLayers实现地图上鼠标经过点要素时显示名称标注提示框，移开后自动隐藏。内容包括依赖安装、vue中集成OpenLayers、功能实现的详细步骤及代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

专栏目录：
OpenLayers实战进阶专栏目录

前言

本章讲解OpenLayers实现地图鼠标经过点要素时显示名称标注提示框，移出后隐藏的功能。
openlayers

二、依赖和使用

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

                

                
                
        

        

    

  


        

            

                

                

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

        


    


                



	

		

			

				
					
48.在 Vue 3 中使用 OpenLayers 实现鼠标悬停显示城市名片

				
			

			

				

					小彭的博客
				

				

					12-28
					
					618
					
				

			

		

		

			
				
通过本文的学习，你学会了在 Vue 3 中如何结合 OpenLayers 实现鼠标悬停功能，增加了地图的交互性。如果你有更多的扩展需求，比如点击事件、动态加载点位或自定义图层样式，可以基于这个示例继续开发。希望这篇文章对你有所帮助！如果有疑问或建议，欢迎评论交流。😊。

			
		

	



                

            
              



	

		

			

				
					
Vue.js与OpenLayers结合实现鼠标移动显示城市名称的功能

				
			

			

				

					laugh666的博客
				

				

					08-29
					
					335
					
				

			

		

		

			
				
而Vue.js作为一款流行的JavaScript框架，具有简洁的语法和响应式的数据绑定特性，能够方便地构建交互性强的用户界面。然后，在Vue组件中使用OpenLayers提供的地图对象和交互对象。在这个示例中，我们使用Map对象和PointerMove交互来监听鼠标移动事件，并获取当前鼠标位置下的城市名称。你可以在Vue组件中使用以上代码，并根据自己的需求进行适当的修改和扩展。方法是一个占位符，根据实际需求，你可以自行实现获取坐标对应城市名称的逻辑，或者调用第三方地理编码服务进行逆地理编码。

			
		

	



              


  
              

                


	

		

			

				
					
openlayer鼠标移入和鼠标点击后提示框展示信息

				
			

			

				

					lingyi_01的博客
				

				

					08-04
					
					2167
					
				

			

		

		

			
				
鼠标移入点击地图 提示框展示信息

移入事件：pointermove

点击事件：click

前端代码

引入bootstrap.js


<div id="map">
	<div id="popup"></div>
</div>




const element_popup = document.getElementById('popup');
const popup = new ol.Overlay({
	element : element_pop..

			
		

	





	

		

			

				
					
vue+openlayers，初始化openlayers地图，实现鼠标移入、点击、右键等事件

				
			

			

				

					lyf_0907的博客
				

				

					03-24
					
					4292
					
				

			

		

		

			
				
主要功能：初始化openlayers地图，实现鼠标移入、点击、右键等事件，以及获取当前图标的feature，将当前图标信息以弹框方式进行展示；地图上展示拾取到的经纬度。步骤一：将地图的公用配置项单独提出成一个js文件，方便打包后进行修改。步骤二：初始化openlayers地图。前端使用的是vue技术栈。

			
		

	



		

			
		



	

		

			

				
					
关于Openlayers中自定义鼠标的移出事件

				
			

			

				

					longlongzuo的博客
				

				

					12-03
					
					5716
					
				

			

		

		

			
				
才来新公司没几天，公司是做WebGis开发的，我自己是学的Java后台开发，来这里之后自学了OpenLayers，在遇到自定义事件的时候，发现只有鼠标移入的自定义事件。
比如下面这样，之前的黄色的圆下面是红色的圆，鼠标放进去之后是编程绿色的圆，这里用的是鼠标移入的自定义事件，但是鼠标移出之后再变回原来的事件却没有。![鼠标放进去的时候圆变成绿色](https://img-blog.csdnimg....

			
		

	





	

		

			

				
					
OpenLayers3学习(二)--鼠标移动事件

					
热门推荐

				
			

			

				

					yizhi鬼的专栏
				

				

					07-08
					
					1万+
					
				

			

		

		

			
				
在Web地图应用开发过程中，最常见的事件之一就是使用鼠标在地图上移动，这里我们利用(一)中的地图服务，在此基础上创建一个鼠标移动的事件，代码如下：


  
    Tiled ArcGIS MapServer
    
    
  
  
  
  	.map
  	{
  		width: 1000px;
  		height: 700px;
  	}
  
  
  
    
    

			
		

	





	

		

			

				
					
OpenLayers地图要素tooltip[文字提示]

				
			

			

				

					01-24
				

			

		

		

			
				
在OpenLayers中，"tooltip"（文字提示）是一种常见的功能，用于提供关于地图上特定要素的额外信息，当用户将鼠标悬停在要素上方时，会显示一个包含相关信息的小窗口。  在OpenLayers中实现地图要素的tooltip，通常...

			
		

	





	

		

			

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

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					10-31
					
					4088
					
				

			

		

		

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

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

			
		

	





	

		

			

				
					
Vue+OpenLayers6实战进阶专栏目录，Vue+OpenLayers实战案例，Vue+OpenLayers6实战教程

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					07-31
					
					2268
					
				

			

		

		

			
				
本篇作为Vue整合OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。本专栏是讲解主流前端框架Vue整合前端最流行的JS二维地图引擎之一OpenLayers的实战教程。

			
		

	





	

		

			

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

					
最新发布

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					05-29
					
					1435
					
				

			

		

		

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

			
		

	





	

		

			

				
					
OpenLayers3实现鼠标移动显示坐标

				
			

			

				

					10-14
				

			

		

		

			
				
主要为大家详细介绍了OpenLayers3实现鼠标移动显示坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
OpenLayers6扩展插件进阶之ol-ext使用：使用Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例

				
			

			

				

					GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
				

				

					05-14
					
					247
					
				

			

		

		

			
				
本章介绍OpenLayers扩展插件ol-ext的Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例。

			
		

	





	

		

			

				
					
openlayers 地图上绘制区域悬浮弹窗实现跟随鼠标移动

				
			

			

				

					zhongguogangkou的博客
				

				

					04-23
					
					2919
					
				

			

		

		

			
				
今天做了一个功能，是基于openlayers在地图上绘制区域，并实现鼠标在区域内悬浮弹出指示窗，指示窗随着鼠标的移动而移动。
我采用的是ol.Overlay方式：
首先新加一个overlay。
function addOverlay(center){
	document.getElementById('overlay').style.display = "block";
	//此处的overlay...

			
		

	





	

		

			

				
					
OpenLayer 图层一键隐藏和显示

				
			

			

				

					qq_33138785的博客
				

				

					11-03
					
					686
					
				

			

		

		

			
				
this.labelLayer=this.map.layer.createVectorLayer('labelLayer');

我们使用for循环创建了这一图层之后，我们再使用


this.labelLayer.setVisible(false)

发现只隐藏了一个，这时候我们就需要，在第一行代码后面加上一句


this.labelLayerData.push(this.labelLayer)

再使用forEach 循环隐藏图层


item.setVisible(false)


...

			
		

	





	

		

			

				
					
Openlayers 教程 13 - 图层对象的常用操作（添加移除、显示隐藏、层级调整、定位等）

				
			

			

				

					linzi19900517的博客
				

				

					04-15
					
					2897
					
				

			

		

		

			
				
在 Openlayers 中，图层是非常基础的对象，这里汇总介绍一下图层常用的操作，主要包括：添加移除、显示隐藏、层级调整、定位。



			
		

	





	

		

			

				
					
【openlayers-4】事件

				
			

			

				

					WXG1011的博客
				

				

					12-30
					
					1780
					
				

			

		

		

			
				
openlayers事件

			
		

	





	

		

			

				
					
Openlayers 教程 06 - feature（图形要素）三种悬浮事件（移入移出）以及适用范围

				
			

			

				

					linzi19900517的博客
				

				

					09-11
					
					1624
					
				

			

		

		

			
				
Openlayers 教程 - feature（图形要素）三种悬浮事件（移入移出）以及适用范围

			
		

	





	

		

			

				
					
Openlayers实战：LayerGroup添加删除显示隐藏

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-20
					
					664
					
				

			

		

		

			
				
不论是word，ppt等都存在分组的操作，Openlayers也同样可以图层分组LayerGroup，构造出一个图层组，往里面添加图层。LayerGroup可以设置透明度，显示隐藏状态等一些列合力属性，方便控制图层，展示一些内容。

			
		

	





	

		

			

				
					
openlayers离线地图vue适用内网，点标记/标注、信息窗、动态中心点、行政区划

				
			

			

				

					Red_sevenWord的博客
				

				

					08-29
					
					2191
					
				

			

		

		

			
				
内网地图 离线地图 vue 点标记，信息窗，行政区划

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值