OpenLayers6扩展插件进阶之ol-ext使用：Flashlight探照灯效果实现，鼠标经过圆形区域高亮

已于 2024-03-28 13:26:16 修改
阅读量677 收藏 7
点赞数 21
分类专栏： OpenLayers6一本通 OpenLayers6扩展进阶 文章标签： 前端 javascript vue.js OpenLayers 探照灯效果
于 2024-03-28 11:21:22 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/137104374
版权
OpenLayers6一本通 同时被 2 个专栏收录
132 篇文章 22 订阅 ¥159.90 ¥299.90
订阅专栏
OpenLayers6扩展进阶
13 篇文章 6 订阅 ¥59.90 ¥99.90
订阅专栏
本文介绍了如何在OpenLayers6中利用ol-ext插件实现探照灯效果，当鼠标经过圆形区域时，该区域会高亮。通过示例代码展示了具体实现过程，只需简单几步即可完成。
摘要由CSDN通过智能技术生成

返回目录：OpenLayers扩展插件系列汇总目录

前言

本章介绍OpenLayers扩展插件ol-ext实现探照灯效果，鼠标经过圆形区域高亮的功能实现。
ol

依赖库

"ol": "^6.15.1"
"ol-ext": "4.0.14",
  1. 使用npm安装依赖

                

                
                
        

        

        

    

  


        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
OpenLayers6扩展插件ol-ext使用：使用状态组件（Status）显示地图状态和地图实时基本信息

				
			

			

				

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

				

					03-21
					
					513
					
				

			

		

		

			
				
本章使用OpenLayers6地图的扩展插件ol-ext来添加一个状态组件（Status）来显示地图状态和地图实时基本信息。注意：本专栏属于Vue整合OpenLayers地图的进阶教程，并不适合入门读者，入门读者和学生需要先学习《Vue+OpenLayers6入门教程》专栏后才能上手本专栏。

			
		

	



                

            
              



	

		

			

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

				
			

			

				

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

				

					05-14
					
					150
					
				

			

		

		

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

			
		

	



              


  
              

                


	

		

			

				
					
使用openlayers给地图添加内发光、外发光、内外阴影、三维立体效果

					
最新发布

				
			

			

				

					aaa_div的博客
				

				

					08-14
					
					679
					
				

			

		

		

			
				
然后使用addOutlineShadow函数添加阴影。拿到canvas上下文了，就可以使用canvas的方法添加阴影效果了，最后再将拿到的坐标数组用canvas的方法绘制成多边形，就可以在地图上显示了。但是这种阴影不能调节偏移量，因此要设置阴影偏移量达到三维立体效果还需要利用canvas原理。给地图添加内阴影、外阴影效果，可以使用ol的扩展库ol-ext。Mask主要用来设置内阴影效果，外阴影则是由Crop设置。事实上，这种方法不仅能绘制阴影，还可以绘制其他效果。我这里堆叠了好几层阴影，这样看着更立体些。

			
		

	





	

		

			

				
					
ol-ext：Openlayers的很酷的扩展（ol）-动画集群，CSS弹出窗口，真棒字体渲染器，统计图图表（piebar），层切换器，维基百科层，动画，画布过滤器

				
			

			

				

					02-14
				

			

		

		

			
				
ol-ext
  （ol）的很酷的扩展。
 是一组用于Openlayers的扩展，控件，交互，弹出窗口。 或。
 关键字：故事图，时间轴控件，CSS弹出窗口，真棒字体，统计图图表（饼图/栏），图层切换器，控制栏，维基百科图层，图例控件，搜索，动画，撤消/重做机制
入门
NPM软件包
ol-ext作为ES6模块（  ）和纯js（  ）存在。
在Webpack中使用ol-ext
 要与webpack，Rollup，Browserify或其他模块捆绑程序一起使用，请安装npm 并链接到node_modules目录：
 npm install ol-ext
有关将OpenLayers与您的应用程序捆绑在一起的更多详细信息，请参见以下示例：
 使用
 使用
使用
在网页上使用ol-ext
 要在网页中使用，请安装npm ：
 npm install openlayers-ext
该库将在node_m

			
		

	



		

			
		



	

		

			

				
					
ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听

				
			

			

				

					冰雪为融的博客
				

				

					03-23
					
					2948
					
				

			

		

		

			
				
官网

示例地址：ol-ext

代码地址：ol-ext: openlayers开源插件库

文档api：查看OpenLayers - Welcome

简单功能示例





自己项目中用到的是 等比例缩放，旋转，拉伸等功能

代码如下


        import ExtTransform from  'ol-ext/interaction/Transform'
        import {always} from 'ol/events/condition'


        const ..

			
		

	





	

		

			

				
					
OpenLayers扩展插件系列之ol-ext，ol-ext库介绍和使用，OpenLayers地图中如何集成ol-ext插件，html网页和vue中如何集成ol-ext插件到地图中

				
			

			

				

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

				

					03-19
					
					995
					
				

			

		

		

			
				
现在可以根据 ol-ext 文档提供的功能，通过 JavaScript 代码来使用各种 ol-ext 提供的扩展功能，比如额外的图层、控件、交互等。ol-ext 是一个用于在 OpenLayers 地图上增加额外功能和控件的扩展库，ol-ext提供了许多额外的功能和控件，如动画效果、3D 功能、图层样式等，可以帮助开发者实现更丰富的地图交互体验。在 Vue 2 项目中的任何页面或组件中，引入并使用上面创建的地图组件，以展示 OpenLayers 地图和 ol-ext 功能。

			
		

	





	

		

			

				
					
OpenLayers6扩展插件进阶之ol-ext使用：ol-ext实现鼠标尾迹闪光动画

				
			

			

				

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

				

					03-22
					
					292
					
				

			

		

		

			
				
本章使用OpenLayers的扩展库ol-ext实现鼠标尾迹闪光动画，像小精灵一样。

			
		

	





	

		

			

				
					
OpenLayers6扩展插件ol-ext使用：ol-ext实现两个地图卷帘拉伸和收缩效果

				
			

			

				

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

				

					03-22
					
					389
					
				

			

		

		

			
				
本章使用OpenLayers的扩展库ol-ext实现两个地图图层卷帘效果，支持上下和左右伸缩。

			
		

	





	

		

			

				
					
218：vue+openlayers 加载geotiff文件，显示图形

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-12
					
					1923
					
				

			

		

		

			
				
第218个本示例的目的是介绍演示如何在vue+openlayers中加载geotiff文件，显示图形，具体的加载方式参考源代码。这里的tif文件有25MB多，加载出来的时间会有点小长。

			
		

	





	

		

			

				
					
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例

				
			

			

				

					linzi19900517的博客
				

				

					02-01
					
					3715
					
				

			

		

		

			
				
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例。

			
		

	





	

		

			

				
					
openlayers 入门（10）地图高亮

				
			

			

				

					qq_53079432的博客
				

				

					10-16
					
					508
					
				

			

		

		

			
				
通过点击事件获取 当前的点 ，再根据当前的点获取当前点击的要素，给地图添加高亮图层，最后将要素和高亮图层匹配

			
		

	





	

		

			

				
					
Openlayers点闪烁扩散效果

				
			

			

				

					guowenf的博客
				

				

					05-04
					
					2062
					
				

			

		

		

			
				
Openlayers点闪烁扩散效果
点闪烁样式：

DOM的样式实现
/**橙色点扩散闪烁样式*/
.point_animation{
	background: #ff9900;
	width: 6px;
	height: 6px;
	border: 2px #ff9900 solid;
	border-radius: 50%;
	position: absolute;
}
.point_anim...

			
		

	





	

		

			

				
					
屏幕演示讲解必备工具：虚拟教棒、屏幕画笔、ZoomIt放大屏幕、鼠标探照灯(图)

				
			

			

				

					mlxueshan的专栏
				

				

					12-05
					
					9690
					
				

			

		

		

			
				
由于工作的需要笔者到各地开课、巡回演讲，一般都随身携带笔记本，用于做屏幕演示讲解，如果屏幕上显示的内容较多，对其中的重点部分做讲解时，用手指在或鼠标指针在屏幕上指指划划终究不方便也显得不够专业。笔者如今发现了四件“宝贝”，无论是对PPT演讲还是会议工作汇报都有非常大的帮助。

　　虚拟教棒指点屏幕
　　用鼠标指针在屏幕上指指划划，观众可能还是不能看清所指的地方，用“虚拟教棒”（下载地址：ht

			
		

	





	

		

			

				
					
openlayers：实现地图上添加一条绿色直线（附完整源码）

				
			

			

				

					希望我的博客，能帮上你解决学习中工作中所遇到的问题
				

				

					02-12
					
					74
					
				

			

		

		

			
				
openlayers：实现地图上添加一条绿色直线（附完整源码）

			
		

	





	

		

			

				
					
openlayers6 添加道路图层 并点击道路高亮显示

				
			

			

				

					m0_65607651的博客
				

				

					05-14
					
					1729
					
				

			

		

		

			
				
openlayers6 添加道路图层 并点击道路高亮显示

			
		

	





	

		

			

				
					
OpenLayers6（2）：Vue中使用ol-ext插件中的LayerSwitcher图层控制控件

				
			

			

				

					碰碰的博客
				

				

					04-22
					
					4957
					
				

			

		

		

			
				
1.版本


	OpenLayers：6.4.3
	
	ol-ext：3.2.22（条件："ol": ">= 5.3.0"）
2.配置ol-ext


// 1、安装ol-ext
npm i ol-ext

// 2、在main.js中引入样式
import 'ol-ext/dist/ol-ext.min.css';


3.使用LayerSwitcher控件

3.1 先看LayerSwitcher构造函数的参数

LayerSwitcher控件的构造函数参数
	selection
			enabl

			
		

	





	

		

			

				
					
ol-ext加载GeoJson格式数据并进行2.5D高度显示

				
			

			

				

					oliuy的博客
				

				

					12-18
					
					1347
					
				

			

		

		

			
				
ol-ext 2.5D高度显示

			
		

	





	

		

			

				
					
openlayers3线段添加闪烁_openlayers 标记点闪烁

				
			

			

				

					weixin_32459211的博客
				

				

					01-28
					
					572
					
				

			

		

		

			
				
Documentvar beijing = ol.proj.fromLonLat([116.28, 39.54]);var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: beijing,zoom: 4})});...

			
		

	





	

		

			

				
					
使用ol-ext插件实现OpenLayers矢量图层3D渲染

				
			

			

				

					
				

			

		

		

			
				
本文将深入探讨如何使用 ol-ext 插件来扩展 OpenLayers，实现矢量图层的3D效果。  首先需要了解的是，OpenLayers 本身支持矢量图层的渲染，但要实现3D效果则需要借助 ol-ext 插件中的特定功能。ol-ext 提供了一系列...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值