Openlayers实现地图全屏显示


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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、结果展示

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

Openlayers实现地图全屏显示

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

Openlayers实现地图全屏显示

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

Openlayers实现地图全屏显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
You might like
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP7新增函数
2021/03/09 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
20个常用Python运维库和模块
2018/02/12 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
电气专业应届生求职信
2013/11/01 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
业务员薪酬管理制度
2014/01/15 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
自荐信的格式
2014/03/10 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js