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 相关文章推荐
javascript fullscreen全屏实现代码
Apr 09 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
jQuery使用animate创建动画用法实例
Aug 07 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
Javascript异步编程async实现过程详解
Apr 02 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下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
Ubuntu彻底删除PHP7.0的方法
2018/07/27 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python中functools模块的常用函数解析
2016/06/30 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
一些Solaris面试题
2013/03/22 面试题
业务员岗位职责范本
2013/12/15 职场文书
企业军训感言
2014/02/08 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
python实现网络五子棋
2021/04/11 Python
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL