编程 Javascript

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实现地图全屏显示

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

Openlayers实现地图全屏显示

- Author -

桃李不言_下自成蹊

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

利用location.hash实现跨域iframe自适应

May 04 Javascript

javascript parseInt() 函数的进制转换注意细节

Jan 08 Javascript

JS比较两个时间大小的简单示例代码

Dec 20 Javascript

jQuery的ready方法详解

Nov 27 Javascript

jQuery的end()方法使用详解

Jul 15 Javascript

AngularJS用户选择器指令实例分析

Nov 04 Javascript

jQuery正则验证注册页面经典实例

Jun 10 jQuery

基于 flexible 的 Vue 组件：Toast -- 显示框效果

Dec 26 Javascript

小程序多图列表实现性能优化的方法步骤

May 28 Javascript

JS实现利用闭包判断Dom元素和滚动条的方向示例

Aug 26 Javascript

js实现鼠标点击飘爱心效果

Aug 19 Javascript

vue中template的三种写法示例

Oct 21 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