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 相关文章推荐
dojo 之基础篇
Mar 24 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
javascript闭包的理解
Apr 01 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
微信小程序之事件交互操作实例分析
Dec 03 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 8小时时间差的解决方法小结
2009/12/22 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python操作mysql数据库
2017/03/05 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python如何生成树形图案
2018/01/03 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
个人求职信范文分享
2014/01/06 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
高中地理教学反思
2016/02/19 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android