OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例

最新推荐文章于 2024-12-08 22:54:14 发布
最新推荐文章于 2024-12-08 22:54:14 发布
阅读量616 收藏 1
点赞数 21
CC 4.0 BY-SA版权
分类专栏： # Vue+OpenLayers6入门到实战 # Vue+OpenLayers6实战 OpenLayers6一本通 文章标签： vue.js 前端 javascript OpenLayers 自定义控件 复位控件 地图恢复默认中心点
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
本文链接：https://blog.youkuaiyun.com/eguid/article/details/136744262
本文介绍了如何在OpenLayers6中创建自定义控件，以地图复位控件为例，详细讲解了从继承Control类、实现功能到代码实现的全过程，并展示了测试效果，通过点击控件能将地图恢复到默认中心点、缩放和方向。

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

前言

本章介绍如何使用OpenLayers创建自定义控件。以创建一个地图复位控件为例，讲解如何创建自定义控件来调整地图为默认的中心点、缩放等级和方向。
openlayers

二、依赖和使用

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

                

                
                
        

         

    



  


        

                

                  

                  

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

        


    



                



	

		

			

				
					
Openlayers 教程 11 - 创建自定义控件（图例、行政区划组件等）

				
			

			

				

					非科班Java出身GISer的博客
				

				

					07-10
					
					2952
					
				

			

		

		

			
				
自定义控件是 Openlayers 的特色功能之一，主要用于实现自定义的功能，比如：美化版的缩放按钮、美化版的全屏按钮等；还有像图层控制、底图控制、标绘控制等。



			
		

	



                

            
              



	

		

			

				
					
openlayers：实现自定义控件 (附完整源码）

				
			

			

				

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

				

					01-28
					
					320
					
				

			

		

		

			
				
openlayers：实现自定义控件 (附完整源码）

			
		

	



              


  
              

                


	

		

			

				
					
OpenLayers自定义GIS控件

				
			

			

				

					ChDevops的博客
				

				

					09-26
					
					285
					
				

			

		

		

			
				
在OpenLayers中，控件是地图上的可视化元素，用于执行特定的功能或显示相关信息。在上面的代码中，我们创建了一个名为CustomZoomControl的自定义控件。在构造函数中，我们创建了一个包含放大和缩小按钮的DOM元素，并添加了相应的CSS类名。在上面的代码中，我们创建了一个地图对象，并使用addControl方法将CustomZoomControl添加到地图的控件列表中。通过上述代码，我们可以在地图上看到一个自定义的缩放控件，用户可以使用该控件来放大或缩小地图。如果你有任何疑问，请随时提问！

			
		

	





	

		

			

				
					
Openlayers 自定义控件

				
			

			

				

					a313469292的博客
				

				

					08-25
					
					1027
					
				

			

		

		

			
				
OpenLayers.Control.YourControl = OpenLayers.Class(OpenLayers.Control, {
 
    // may private properties here ...
 
      
 
    initialize: function(options) {
 
        OpenLayers.Cont...

			
		

	



		

			
		



	

		

			

				
					
OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式

				
			

			

				

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

				

					03-18
					
					561
					
				

			

		

		

			
				
本章讲解OpenLayers6如何创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小和文字和按钮等自定义样式的功能。

			
		

	





	

		

			

				
					
openlayers实现自定义绘图控件实现类似ArcGIS绘图工具条

				
			

			

				

					此爱如少年
				

				

					07-13
					
					2453
					
				

			

		

		

			
				
接前一篇《》，绘图功能虽然实现了，但是仅仅开发到这里，做Demo还行，如果要应用到项目中，
显然是不太灵活，因此，将绘图功能封装到控件中，作为工具，将更有利于我们来使用。
文章目录1、ol.control.Control类2、需求3、代码实现1）、继承2）属性方法3）按钮样式4、结果
先来看下openlayers自带的控件。
1、ol.control.Control类
openlayers中所有控...

			
		

	





	

		

			

				
					
angularjs与openlayers3自定义控件

				
			

			

				

					01-16
				

			

		

		

			
				
实现对angularjs 与openlayer3自定义控件，对于地图服务。

			
		

	





	

		

			

				
					
OpenLayers地图全屏显示并包含自定义的工具栏及自定义控件

				
			

			

				

					heiyihahei的博客
				

				

					02-27
					
					1112
					
				

			

		

		

			
				
在OpenLayers中，全屏控件（FullScreen）默认会将整个地图容器元素全屏显示。这意味着除了地图本身之外，如果你的底图切换按钮、其他工具栏等UI元素没有包含在地图容器内，它们在进入全屏模式时不会被显示。要实现全屏时包含自定义功能组件的效果，你需要确保这些额外的UI元素与地图容器一同进入全屏状态。

			
		

	





	

		

			

				
					
OpenLayer3自定义测量控件MeasureTool

				
			

			

				

					01-18
				

			

		

		

			
				
一直苦恼于OpenLayer3没有现成的测量工具，看了歪果仁做的图层控件，于是自己结合了官网上的measure实例和歪果仁的模板鼓捣出了一个测量工具控件。
下载地址
描述
基于Openlayers3所做的自定义控件，支持测量距离（line）和测量面积（area）以及geodesic测量
  加载css和js文件后直接引用即可
  使用JavaScript原生编写，不需要引入JQuery
使用效果如图：

使用方式
在html页面中引入OpenLayer3的css和js文件后再加入下载的measuretool.css和measuretool.js

<link rel=stylesheet 

			
		

	





	

		

			

				
					
二十一、openlayers官网示例Custom Controls解析——自定义控件扩展Control类

				
			

			

				

					aaa_div的博客
				

				

					05-21
					
					528
					
				

			

		

		

			
				
首先创建了一个新的类继承了原本的Control，新增了一个button元素，然后调用了super方法将参数传给了父类。在点击事件里调用了openlayers的setRotation()方法控制视图倾斜角度。可以在node_moudles里面找到Control类的源码，看到父类需要的参数。如果style里面设置了scoped，样式代码这里需要使用样式穿透，否则不会生效。然后调了super方法将参数传递给父类。这个示例讲的是如何自定义控件。

			
		

	





	

		

			

				
					
openlayers中自定义工具条

				
			

			

				

					07-16
				

			

		

		

			
				
openlayers中自定义工具条，有需要的自己下载，16年刚玩openlayers的时候做的，一些东西已经过时了

			
		

	





	

		

			

				
					
16.在 Vue 3 中使用 OpenLayers 实现自定义地图缩放控件

					
最新发布

				
			

			

				

					小彭的博客
				

				

					12-08
					
					1005
					
				

			

		

		

			
				
在前端开发中，地图交互是一个常见且重要的需求。默认情况下，OpenLayers 提供了丰富的控件（如缩放、旋转、属性标注等），但有时我们需要根据项目需求自定义交互逻辑，比如禁用默认缩放控件并实现自己的按钮式缩放功能。本文将带大家实现一个自定义地图缩放的功能，通过 Vue 3 的 Composition API 和 OpenLayers 来构建。接下来，我们通过以下步骤实现所需功能。放大按钮zoomin：获取当前缩放级别后加 1。缩小按钮zoomout：获取当前缩放级别后减 1。// 放大。

			
		

	





	

		

			

				
					
OpenLayers教程七：自己实现图层切换控件

				
			

			

				

					不睡觉的怪叔叔的博客
				

				

					07-01
					
					7343
					
				

			

		

		

			
				
OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。

  自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。

  完整代码：

  layerSwitch.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UT...

			
		

	





	

		

			

				
					
Openlayers：自定义Controls

				
			

			

				

					席木木的博客
				

				

					11-12
					
					649
					
				

			

		

		

			
				
Openlayers是一款优秀的二维开源地图框架，支持矢量/栅格图层，支持移动端，并且易于自定义和拓展，本文主要讲述如何自定义Control，实现ol定制化拓展的基本思路。

			
		

	





	

		

			

				
					
OpenLayers中移除默认控件，添加其他控件

				
			

			

				

					Moon Star
				

				

					08-16
					
					1371
					
				

			

		

		

			
				
OpenLayers中移除、添加控件

			
		

	





	

		

			

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

				
			

			

				

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

				

					07-25
					
					2259
					
				

			

		

		

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

			
		

	





	

		

			

				
					
openlayers 入门教程（六）：controls 篇

				
			

			

				

					大剑师兰特的GIS世界
				

				

					03-25
					
					4224
					
				

			

		

		

			
				
控件是一个可见的小部件，其 DOM 元素位于屏幕上的固定位置。 它们可以涉及用户输入（按钮），或者仅提供信息； 位置是使用 CSS 确定的。 默认情况下，它们放置在 CSS 类名为 ol-overlay container-stop event 的容器中，但可以使用任何外部 DOM 元素。

			
		

	





	

		

			

				
					
openlayers添加按钮_Openlayers API整理

				
			

			

				

					weixin_39594080的博客
				

				

					12-19
					
					958
					
				

			

		

		

			
				
一、创建地图1、地图Map创建地图底图：需要用new ol.Map({})地图map是由图层layers、一个可视化视图view、用于修改地图内容的交互interaction以及使用UI组件的控件control组成的。(1)、创建基本地图let map = new ol.Map({target: 'map',//对象指向layers: [//图层new ol.layer.Tile({//这里定义的...

			
		

	





	

		

			

				
					
OpenLayers项目分析[转]（九）：控件

				
			

			

				

					地理信息，无处不在
				

				

					05-08
					
					3224
					
				

			

		

		

			
				
（九）OpenLayers中的控件为了让更多的人看到这篇好文章，我把它转载到这里，这篇文章转载自http://www.3snews.net/html/24/10624-17584.html，原文作者如觉得不妥，可联系我删除之。　　OpenLayers中的控件，是通过加载到地图上而起作用的，也算地图表现的一部分。同时，控件需要对地图发生作用，所以每个控件也持有对地图（map对象）的引用。

			
		

	





	

		

			

				
					
OpenLayers3实战：自定义图层控件与代码示例

				
			

			

				

					
				

			

		

		

			
				
OpenLayers3 是一个强大的开源 JavaScript 地图库，它允许开发者创建交互式地图应用。本文主要探讨如何在 OpenLayers3 中实现图层控件功能，以便更好地管理和控制地图上的图层。由于 OpenLayers3 内置的控件功能有限...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

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

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值