Openlayers实现地图全屏显示

本文实例为大家分享了Openlayers实现地图全屏显示的具体代码，供大家参考，具体内容如下

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

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <link href="../css/ol.css" rel="external nofollow" rel="stylesheet" />
  <script src="../lib/ol/ol.js"></script>
  <script type="text/javascript">
    window.onload = function () {
      //实例化全屏显示控件
      var fullScreenControl = new ol.control.FullScreen();

      //实例化地图
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source:new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: [12900000, 4900000],
          zoom:8
        })
      });

      //将全屏显示控件加载到map中
      map.addControl(fullScreenControl);
    };
  </script>
</head>
<body>
  <div id="map"></div>
</body>
</html>

3、结果展示

地图初始化的时候，在右上角多了一个全屏显示的图标

单击这个图标，将会在整个屏幕显示当前的地图，并提示按esc键退出全拼显示

单击全屏显示右上角的那个关闭按钮，地图又回到初始的显示形式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用OpenLayers3 添加地图鼠标右键菜单

    使用OpenLayers3 添加地图鼠标右键菜单

    添加右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 contextmenu,当鼠标在 html 元素之上,点击鼠标右键,便会触发 contextmenu 事件,在 contextmenu 事件的回调函数中实现相应的显示菜单功能即可. 那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面的过程. openlayers 初始化页面过程 openlayers 也是一个前端库,那么它肯定离不开 html 的运用

  • OpenLayers3实现对地图的基本操作

    本文实例为大家分享了OpenLayers3实现对地图的基本操作代码,供大家参考,具体内容如下 1. 前言 对地图的基本操作就是对地图的放大.缩小.移动.复位和更新等,通过使用OpenLayers 3 框架中操作地图视图(View)的相应方法. 2. 实现思路 (1)新建一个网页,参照前面的文章加载OSM瓦片地图,通过视图设置地图的最大.最小缩放级别以及初试旋转角度,通过使用jQuery以及bootstrap来实现在缩放控件以及旋转控件鼠标悬停提示的效果. (2)在地图容器中新建4个按钮(butt

  • openlayers实现地图测距测面

    本文实例为大家分享了openlayers实现地图测距测面的具体代码,供大家参考,具体内容如下 项目背景vue-cli3.0 public下html需要引入文件 <link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css"> <script src="<%= BASE_URL %>./js/ol.js&qu

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

    本文实例为大家分享了vue-openlayers实现地图坐标弹框的具体代码,供大家参考,具体内容如下 openlayers 这个效果是点击地图,弹出坐标信息. 点击地图边缘时,底图会跟着移动,使弹窗能完整显示出来. <template> <div class="vm"> <h2 class="h-title">弹窗 popup</h2> <div id="map" class="ma

  • OpenLayers3实现地图鹰眼以及地图比例尺的添加

    本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下 1. 前言 地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击.拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式. 2. 实现思路 (1)新建一个网页,并参考

  • OpenLayers3实现地图显示功能

    本文实例为大家分享了OpenLayers3实现地图显示的具体代码,供大家参考,具体内容如下 1.配置开发环境 使用OpenLayers 3开发WebGIS应用,我们首先需要配置开发环境,首先我们需要在openlayers官网获取OpenLayers 3的开发库.下载链接:官网.打开后如图所示: 需要注意的是这里下载有两个版本,①:仅包括开发库(开发与调试的JS库以及CSS文件),②:包括开发库.开发库源码.示例.API等所有开发资源. 在这里我下载了第一个版本,下载后如图所示: 2. 显示一个O

  • Openlayers实现地图的基本操作

    本文实例为大家分享了Openlayers实现地图基本操作的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个Div标签和4个Button按钮,用来实现地图的放大.缩小.平移等功能: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

  • Openlayers学习之地图比例尺控件

    本文实例为大家分享了Openlayers地图比例尺控件的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type&q

  • openlayers实现地图弹窗

    本文实例为大家分享了openlayers实现地图弹窗的具体代码,供大家参考,具体内容如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href=

  • Openlayers实现地图全屏显示

    本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • C#中让控件全屏显示的实现代码（WinForm）

    1.使用winapi "SetParent" 接口: 复制代码 代码如下: [DllImport("user32.dll", SetLastError = true)] static extern IntPtr SetParent(IntPtr hWndChild, IntPtr hWndNewParent); 复制代码 代码如下: control.Dock = DockStyle.None; control.Left = 0; control.Top = 0; c

  • javascript full screen 全屏显示页面元素的方法

    一种最简单的方式,就是动态改变你想要全屏显示的部件的style,例如position变成absolute,height和width都设置成窗口大小,并且把背景颜色改成全白(为了遮住页面上其余的元素).这样网页上就只能看到你要突出的部件了,视觉上就等同于全屏.同时利用javascript监听键盘事件,一旦用户按了ESc退出键,就恢复原来的样子.部分代码如下: 复制代码 代码如下: document.onkeydown = function (event) {        var e = even

  • delphi程序全屏显示无标题栏覆盖整个屏幕(适合屏保)

    delphi 程序全屏显示无标题栏,覆盖整个屏幕,这个在做工控机或屏保时有用的,所以记下 复制代码 代码如下: procedure TMainFrm.FormCreate(Sender: TObject); begin with MainFrm do begin { Position form } Top := 0 ; Left := 0 ; { Go full screen} BorderStyle := bsNone ; WindowState := wsmaximized; ClientW

  • android 中去掉窗口全屏显示的简单方法

    复制代码 代码如下: //去掉窗口        requestWindowFeature(Window.FEATURE_NO_TITLE);(一定要放在setContentView(R.layout.main)的前面)        //全屏显示        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

  • js控制页面的全屏展示和退出全屏显示的方法

    本文实例讲述了js控制页面的全屏展示和退出全屏显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <body>    <div style="margin:0 auto;heig

  • js全屏显示显示代码的三种方法

    第一种:       在已经打开的一个普通网页上,点击"全屏显示",然后进入该网页对应的全屏模式.方法为:在网页的<body>与</body>之间加入以下代码: 复制代码 代码如下: <form><input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location,

  • IE：如何做到全屏显示

    IE：如何做到全屏显示

    我们用IE等浏览器打开一个网页时,会发现菜单栏.工具栏.状态栏几乎占去了几乎一半的空间,真正用于显示网页的空间极为有限.虽然现在的好多显示器都是15寸的了,但是14寸的显示器还占有相当一部分比例.这种情况下,网页的全屏显示就显得尤其重要了. 全屏显示的方法即为简单.启动IE5后,点击"查看"菜单,点击"全屏"命令就可以了.或者直接按快捷键盘F11,也可以达到一样的效果. 如果要恢复以前的设置,只要点击可上角的"还原"按钮就可以了. 怎么样,试试看

  • Android编程之界面实现全屏显示的方法(2种方法)

    本文实例讲述了Android编程之界面实现全屏显示的方法.分享给大家供大家参考,具体如下: 在开发android的应用当中,我们会遇到将一些界面设置为全屏显示的格式,有两种实现的方法.其一是在Java代码中实现,其二是在配置文件中实现. 1. 在Java代码中设置 super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); //无title getWindow().setFlags(Wind

  • Android 实现全屏显示的几种方法整理

    Android 实现全屏显示的几种方法整理 A.设置主题实现全屏 直接在AndroidManifest.xml文件中设定Activity主题为全屏模式 android:theme="@android:style/Theme.NoTitleBar.Fullscreen" B.代码实现全屏 代码实现需要分两步做,如下: 1.隐藏标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); 2.隐藏状态栏 getWindow().setFlags(Wi

随机推荐