Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏

已于 2024-03-16 10:41:02 修改
阅读量134 收藏 1
点赞数 1
分类专栏： Vue+OpenLayers7入门到实战 # Vue+OpenLayers7入门 文章标签： vue.js 前端 javascript OpenLayers OpenLayers7 地图全屏 OpenLayers地图控件
于 2024-01-26 09:36:17 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/135858442
版权
Vue+OpenLayers7入门到实战 同时被 2 个专栏收录
69 篇文章 14 订阅 ¥89.90 ¥99.00
订阅专栏
Vue+OpenLayers7入门
61 篇文章 1 订阅 ¥49.90 ¥99.00
订阅专栏

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上使用地图全屏功能，实现OpenLayers地图的全屏和退出全屏操作。

注意：这里的全屏指的是网页节点全屏，包含地图在内的网页节点全屏，并非指单个地图容器

Vue+OpenLayers7入门到实战

二、依赖和使用

在package.json中添加

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

                

                
                
        

        

        

    




        

            

                

                

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

        

    

      

        

            

              
                
                  汤姆猫不是猫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式

				
			

			

				

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

				

					01-24
					
					461
					
				

			

		

		

			
				
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。

			
		

	



                

              
                



	

		

			

				
					
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图

				
			

			

				

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

				

					01-24
					
					485
					
				

			

		

		

			
				
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。

			
		

	



                


  
              

                


	

		

			

				
					
OpenLayers基础学习（Vue）

				
			

			

				

					weixin_41027083的博客
				

				

					04-20
					
					3831
					
				

			

		

		

			
				
源文档：https://openlayers.org/
中文文档：http://linwei.xyz/ol3-primer/index.html
本文的openlayers的版本是6.14.1，结合vue使用的。
安装ol
npm i ol

地图的重要组成部分

地图 Map

是一个入口


视图 View

控制地图显示的中心位置，范围，层级等


图层 Layer

有很多图层，每种图层在实现上都对应于一个类，放在ol.layer下面，比如layer.Title(切片图层)。它允许多个layer重叠

			
		

	





	

		

			

				
					
7. OpenLayers 实现矢量元素编辑功能（结合Vue 详细教程）

				
			

			

				

					全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
				

				

					06-25
					
					1240
					
				

			

		

		

			
				
在本教程中，我们将向您展示如何在Vue和OpenLayers中实现矢量要素的编辑功能。我们将在一个已有的Vue和OpenLayers项目中添加编辑交互。交互实例，并设置要素来源，现在只需将鼠标放置在要编辑元素的边缘即可拖拽鼠标实现编辑元素。在上述代码中，我们创建了一个新的。方法中，我们将创建一个新的。

			
		

	



		

			
		



	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers地图平移到指定位置，地图平移动画效果

				
			

			

				

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

				

					01-29
					
					367
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上如何实现平移地图到指定经纬度位置的功能。也即使用OpenLayers操作地图平移动画跳转位置效果。

			
		

	





	

		

			

				
					
vue3+vite+openlayers6实现绘制扇形及环形组件代码

				
			

			

				

					08-05
				

			

		

		

			
				
在手写openlayers6 绘制扇形及环形源码的过程中会摘取openlayers中的核心逻辑，简化代码实现过程，保留核心功能，例如：vue3接入openlayers openlayers绘制环形 openlayers绘制扇形 适合人群：具备一定编程基础，...

			
		

	





	

		

			

				
					
天地图开发实战：Vue结合OpenLayers实现动态点位地图

					
最新发布

				
			

			

				

					06-06
				

			

		

		

			
				
通过这个实战案例，读者将学习到如何集成天地图服务，并在地图上动态展示和更新点位信息。  主要内容： OpenLayers库的引入：文章首先介绍了如何导入OpenLayers的核心模块，包括地图(Map)、视图(View)、图层(Layer)...

			
		

	





	

		

			

				
					
vue+openlayers简单示例

				
			

			

				

					10-19
				

			

		

		

			
				
这个“vue+openlayers简单示例”是为了演示如何在Vue项目中集成OpenLayers，以便在Web应用中展示和操作地图。  首先，集成OpenLayers到Vue项目中的关键步骤包括安装依赖和创建组件。在命令行中，你可以使用npm（Node...

			
		

	





	

		

			

				
					
vue全屏显示及退出组件.zip

				
			

			

				

					03-04
				

			

		

		

			
				
本教程将详细讲解如何在Vue中实现全屏显示及退出功能，并提供一个实用的代码示例。  首先，我们需要了解HTML5中的全屏API。这个API提供了进入和退出全屏模式的方法，主要涉及以下两个方法：  1. `element....

			
		

	





	

		

			

				
					
vue-openlayers实现地图坐标弹框效果

				
			

			

				

					10-14
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。...同时，Vue与OpenLayers的结合使得界面和地图交互逻辑的编写变得简洁易懂，提高了开发效率。

			
		

	





	

		

			

				
					
Openlayers实现地图全屏显示

				
			

			

				

					10-14
				

			

		

		

			
				
主要为大家详细介绍了Openlayers实现地图全屏显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
开源地图引擎openlayers_教你用vue+JavaScript+openlayers+iview制作天气预报图

				
			

			

				

					weixin_28832121的博客
				

				

					12-30
					
					496
					
				

			

		

		

			
				
啥都不说先看效果还有事件统计功能，以及本地天气预报功能。这算是前端技术中的webgis相关的知识，这些实现都是用的纯前端加上中国天气网api和高德地图的地理编码的api请求数据。因为这个小demo涉及的数据传递较多，所以我选择使用vue框架，另外为了地图的展示，openlayers作为开源的webgis库，是很值得被选择，本项目涉及较多的就是openlayers添加地图，以及在地图上添加overl...

			
		

	





	

		

			

				
					
Vue+OpenLayers7入门到实战：鹰眼控件简单介绍，并使用OpenLayers7在地图上添加鹰眼控件

				
			

			

				

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

				

					01-25
					
					312
					
				

			

		

		

			
				
本章介绍OpenLayers7添加鹰眼控件到地图上的功能。在OpenLayers中，想要实现鹰眼控件，必须要新建一个数据源，且不能跟其他图层混用，相当于鹰眼是一个单独图层。

			
		

	





	

		

			

				
					
openlayers：实现全屏显示（附完整源码）

				
			

			

				

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

				

					01-31
					
					205
					
				

			

		

		

			
				
openlayers：实现全屏显示（附完整源码）

			
		

	





	

		

			

				
					
openlayer 全屏控制

				
			

			

				

					Orbita_wangtao
				

				

					07-25
					
					2265
					
				

			

		

		

			
				
全屏控制



单击右上角的控件以全屏显示。再次单击它以退出全屏。

如果地图上没有按钮，则您的浏览器不支持全屏API。


<!DOCTYPE html><html>

  <head>

    <title>Full Screen Control</title>

    <link rel="stylesheet" href..

			
		

	





	

		

			

				
					
html把地图显示全屏显示,Openlayers实现地图全屏显示

				
			

			

				

					weixin_34786066的博客
				

				

					06-20
					
					889
					
				

			

		

		

			
				
本文实例为大家分享了Openlayers实现地图全屏显示的具体代码，供大家参考，具体内容如下1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个div标签，用来作为地图加载的容器；2、代码实现window.onload = function () {//实例化全屏显示控件var fullScreenControl = new ol.control.FullScree...

			
		

	





	

		

			

				
					
OpenLayer4地图全屏的实现

				
			

			

				

					pdw521的专栏
				

				

					07-11
					
					1000
					
				

			

		

		

			
				
OpenLayer4地图全屏的实现第一种方式：自实现1.首先将地图容器的长宽设置成100%。2.对form 和body标签长宽设置成100%。3.对浏览器进行全屏设置。具体代码如下所示：fullextent 为全屏安全ID。    $("#fullextent").click(function () {        //alert("全屏");        if ($("#fullextent...

			
		

	





	

		

			

				
					
Openlayers4中的全屏

				
			

			

				

					LZUGIS
				

				

					04-09
					
					2109
					
				

			

		

		

			
				
概述

Openlayers4中，ol.control.FullScreen()可实现地图的全屏展示，可是当地图的初始化宽度和高度都不是100%的时候，全屏的时候只会宽度的100%，高度还是原来地图的高度。本文讲述如何解决此问题。



效果









解决

解决此问题的关键还是在于全屏的时候地图的容器的高度也得变成100%。因此，解决代码如下：



html,
body,
#map{...

			
		

	





	

		

			

				
					
020：vue+openlayers设置显示全屏功能（示例代码）

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-10
					
					1062
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在openlayers中使添加使用全屏控件，呈现全屏和还原的效果。直接复制 vue+openlayers源代码，操作2分钟即可运行实现效果

			
		

	





	

		

			

				
					
vue+openLayers 实现图层控制控件

				
			

			

				

					06-02
				

			

		

		

			
				
要在 Vue 中使用 OpenLayers 实现图层控制控件，可以按照以下步骤进行操作：

1. 安装 OpenLayers 和 Vue：
   ```
   npm install ol vue
   ```

2. 在 Vue 中引入 OpenLayers：
   ```javascript
   import ol from 'ol'
   import 'ol/ol.css'
   ```

3. 创建地图容器：
   ```html
   <template>
     <div ref="map" class="map"></div>
   </template>
   ```

4. 在 Vue 的 mounted 钩子函数中创建地图：
   ```javascript
   mounted() {
     // 创建地图容器
     const map = new ol.Map({
       target: this.$refs.map,
       layers: [
         new ol.layer.Tile({
           source: new ol.source.OSM()
         })
       ],
       view: new ol.View({
         center: ol.proj.fromLonLat([116.3975, 39.9085]),
         zoom: 12
       })
     });
     this.map = map;
   }
   ```

5. 创建图层控制控件：
   ```html
   <template>
     <div ref="map" class="map">
       <div class="ol-control ol-custom-control">
         <div class="ol-custom-control-header">图层控制</div>
         <div class="ol-custom-control-body">
           <div v-for="(layer, index) in layers" :key="index">
             <input type="checkbox" :id="layer.name" v-model="layer.visible">
             <label :for="layer.name">{{ layer.name }}</label>
           </div>
         </div>
       </div>
     </div>
   </template>
   ```

6. 在 Vue 的 data 中定义图层数据和控件的状态：
   ```javascript
   data() {
     return {
       map: null,
       layers: [
         { name: 'OSM', visible: true, layer: new ol.layer.Tile({ source: new ol.source.OSM() }) },
         { name: 'Bing Maps', visible: false, layer: new ol.layer.Tile({ source: new ol.source.BingMaps({ key: 'your-bingmaps-api-key', imagerySet: 'Road' }) }) }
       ]
     }
   }
   ```

7. 在 Vue 的 watch 中监听图层状态的变化并更新地图：
   ```javascript
   watch: {
     layers: {
       deep: true,
       handler(layers) {
         const map = this.map;
         map.getLayers().clear();
         layers.forEach(layer => {
           if (layer.visible) {
             map.addLayer(layer.layer);
           }
         });
       }
     }
   }
   ```

通过以上步骤就可以在 Vue 中实现图层控制控件了。需要注意的是，在实际应用中，可以根据需要自定义控件的样式和布局。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

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

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值