OpenLayer 3 鹰眼控件和全屏显示

最新推荐文章于 2022-01-12 20:52:27 发布
最新推荐文章于 2022-01-12 20:52:27 发布
阅读量153 收藏
点赞数
原文链接：http://www.cnblogs.com/mina-huojian66/p/6004316.html
版权 
<body>
    <div id="map"></div>
    <script>
        var map=new ol.Map({
            target:"map",
            layer:[],
            view:new ol.View({
                center:[0,0],
                zoom:2
            })
            //control:new control.defaults().extend([
            //  new ol.control.FullScreen()
            // ])
        })
        var tilelayer=new ol.layer.Tile({
            source:new ol.source.OSM()
        });
        map.addLayer(tilelayer);
        var overviewMapControl=new ol.control.OverviewMap({
            layer:[
                    new ol.layer.Tile({
                        source:new ol.source.OSM({
                            "url":"http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
                        })
                    })
            ],
            collapseLabel:"\u00BB",//鹰眼展开时功能按钮上的标识
            label:"\u00AB",//鹰眼折叠时功能按钮上的标识
            collapsed:false//初始为展开显示方式
        });
        var fullScreen=new ol.control.FullScreen();//openlayer 3 仅支持IE最新版本（IE 11+）
        map.addControl(fullScreen);
        map.addControl(overviewMapControl);

 

 

转载于:https://www.cnblogs.com/mina-huojian66/p/6004316.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30492047
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
openlayer 鹰眼插件

				
			

			

				

					Orbita_wangtao
				

				

					07-26
					
					1056
					
				

			

		

		

			
				


 此示例演示如何使用其支持的选项自定义overviewmap控件以及定义自定义CSS。您还可以使用shift键旋转地图，以查看总览图的反应方式


&lt;!DOCTYPE html&gt;&lt;html&gt;

  &lt;head&gt;

    &lt;title&gt;Custom Overview Map&lt;/title&gt;

    &lt;link rel="sty...

			
		

	



                

              
                



	

		

			

				
					
Openlayers之地图全屏显示

				
			

			

				

					SmileCoffin的博客
				

				

					02-10
					
					6013
					
				

			

		

		

			
				
1、新建一个html页面，引入ol.js和ol.css文件，然后在body中创建一个div标签，用来作为地图加载的容器；
2、代码实现




    
    
    
    
        window.onload = function () {
            //实例化全屏显示控件
            var fullScreenControl = new ol.c

			
		

	



                


  
              

                


	

		

			

				
					
openlayer影像鹰眼图

				
			

			

				

					ParisT_T的博客
				

				

					05-22
					
					607
					
				

			

		

		

			
				
需要注意的是引入如果只有ol.css和ol.js的话，import需要修改
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {defaults as defaultControls, OverviewMap} from 'ol/control.js';
      import...

			
		

	





	

		

			

				
					
OpenLayers 地图鹰眼、拉框示例代码

				
			

			

				

					09-29
				

			

		

		

			
				
OpenLayers 地图鹰眼、拉框示例代码  仅供学习参考

			
		

	



		

			
		



	

		

			

				
					
openlayers6【七】地图控件controls详解

				
			

			

				

					@必意玲
				

				

					05-27
					
					7408
					
				

			

		

		

			
				
文章目录1. controls 简述2. 常见的 controls 控件3. 控件的使用3.1 fullscreen 全屏控件3.2 mouseposition 鼠标位置控件3.3 overviewmap 地图全局视图（鹰眼图）控件3.4 scaleline 比例尺控件3.5 zoom 缩放控件3.6 zoomslider 缩放滑块刻度控件4. 总结
1. controls 简述
上篇文章我们将了在地图上的交互(interaction)，那些都是一些隐性的需要去使用才能知道存在有这样一个东西，就像彩蛋一样。

			
		

	





	

		

			

				
					
OpenLayer3自定义测量控件MeasureTool

				
			

			

				

					10-14
				

			

		

		

			
				
总的来说，OpenLayer3的MeasureTool控件是一个实用的工具，它可以方便地集成到任何使用OpenLayer3的地图应用中，提供距离和面积的测量功能，同时支持地理坐标系下的测量，这对于地理信息系统（GIS）应用来说是非常...

			
		

	





	

		

			

				
					
OpenLayer学习之自定义测量控件

				
			

			

				

					10-14
				

			

		

		

			
				
在这个"OpenLayer学习之自定义测量控件"的主题中，我们将探讨如何利用OpenLayers创建自定义的测量工具，以满足特定的地理测量需求。  首先，自定义控件在OpenLayers中是通过继承基类`ol.control.Control`来实现的。...

			
		

	





	

		

			

				
					
openlayer自定义鹰眼

				
			

			

				

					09-22
				

			

		

		

			
				
它的核心是图层（Layer）和视图（View），其中图层负责加载地图数据，视图则控制地图的显示范围、比例尺和中心点。  要实现自定义鹰眼，我们需要创建一个新的图层来展示鹰眼视图。这个图层的数据源应该与主地图相同...

			
		

	





	

		

			

				
					
Openlayers学习之加载鹰眼控件

				
			

			

				

					10-14
				

			

		

		

			
				
在OpenLayers库中，鹰眼控件（OverviewMap Control）是一种非常实用的工具，它可以在主地图的旁边提供一个小窗口，显示地图的全局视图，帮助用户更好地理解他们在地图上的位置。本文将深入探讨如何在OpenLayers应用...

			
		

	





	

		

			

				
					
openlayer 全屏控制

				
			

			

				

					Orbita_wangtao
				

				

					07-25
					
					2279
					
				

			

		

		

			
				
全屏控制



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

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


&lt;!DOCTYPE html&gt;&lt;html&gt;

  &lt;head&gt;

    &lt;title&gt;Full Screen Control&lt;/title&gt;

    &lt;link rel="stylesheet" href..

			
		

	





	

		

			

				
					
OpenLayers官方示例详解九之鹰眼控件（Overview Map Control）

				
			

			

				

					不睡觉的怪叔叔的博客
				

				

					12-14
					
					4928
					
				

			

		

		

			
				
 

一、示例简介

    这个示例演示了OpenLayers中鹰眼控件（ol.control.OverviewMap）的使用。



二、代码详解


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewpor

			
		

	





	

		

			

				
					
鹰眼、比例尺、书签、InfoWindow

				
			

			

				

					
				

				

					01-31
					
					308
					
				

			

		

		

			
				
Eagle Eyes
构造方法：esri.dijit.OverviewMap(params,srcNodeRef)//srcNodeRef是Html元素
params包括：attachTo,baseLayer,expandFactor,expandFactor,opacity;  
Attribute Contains:hide,Show,startup,destory。
一个Tip：


			
		

	





	

		

			

				
					
openlayer 控制图层显示

				
			

			

				

					淘淘小窝
				

				

					06-25
					
					4253
					
				

			

		

		

			
				
感激小二哥的大力相助!
思路:1.找到要控制的图层
         2.设置图层的比例尺等参数就可以了(即在什么比例尺下显示图层)
附简单代码
1.地图比例尺
var resolutionsMy = [0.000171661376953125,0.0000858306884766];


2.图层比例尺
	pointsLayer = new OpenLayers.Layer.V

			
		

	





	

		

			

				
					
Cesium鹰眼地图（基于openlayers）

				
			

			

				

					xt3d的博客
				

				

					12-21
					
					979
					
				

			

		

		

			
				
Cesium鹰眼地图（基于openlayers）效果
效果

详情参见 Cesium实战项目



			
		

	





	

		

			

				
					
openlayers入门开发系列之地图展示篇

				
			

			

				

					weixin_34396103的博客
				

				

					08-05
					
					375
					
				

			

		

		

			
				
GIS之家一直打算写一个openlayers入门开发系列文章（openlayers目前版本用4.x），只是一直没抽出时间来整理；本文是openlayers入门开发系列的第一篇：地图展示篇，后续会持续更新一系列入门开发文章。
整个系列的系统主界面会随着功能增加而对应改变，大体布局如下：

详细的实现过程见：这里...

			
		

	





	

		

			

				
					
加载地图，加载shp文件和鹰眼图功能

				
			

			

				

					memory专栏
				

				

					05-18
					
					3975
					
				

			

		

		

			
				
private void button1_Click(object sender, EventArgs e)
        {
            OpenFileDialog openMXD = new OpenFileDialog();
            openMXD.Title = "open map";
            openMXD.InitialDirectory

			
		

	





	

		

			

				
					
WebGis鹰眼图

				
			

			

				

					苟冬新
				

				

					09-25
					
					3528
					
				

			

		

		

			
				
WebGis鹰眼图&全屏显示
鹰眼图是GIS中一个基本的功能，鹰眼图，顾名思义，在鹰眼图上可以像从空中俯视一样查看地图框中所显示的地图在整个图中的位置。
直接贴代码了，关于代码都有注解。
引入相关css样式
<style>
    html,
    body,
    #viewDiv {
        padding: 0;
        margin: 0;
    ...

			
		

	





	

		

			

				
					
cesium-ol二三维联动(鹰眼图)

				
			

			

				

					孙霸天的专栏
				

				

					01-12
					
					1998
					
				

			

		

		

			
				
cesium-ol二三维联动(鹰眼图)
cesium除了使用两个viewer联动的方式实现鹰眼图，还有其他方式
这里我使用cesium和ol联动的方式实现鹰眼图（也可以实现简单的二三维联动效果）
实现思路

监听cesium地图的移动
当移动视图时，计算cesium视图范围，并传递给ol
监听ol地图移动，当ol移动时，计算ol的视图范围
传递给cesium（cesium会垂直移动）

实现代码
<!DOCTYPE html>
<html lang="en">
<head&gt

			
		

	





	

		

			

				
					
openlayer不通过控件纯函数实现全屏

					
最新发布

				
			

			

				

					05-26
				

			

		

		

			
				
可以通过以下代码实现全屏：  ```javascript function toggleFullScreen() {  if (!document.fullscreenElement && // alternative standard method  !document.mozFullScreenElement && !document....

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值