Openlayers实现地图全屏显示
更新时间：2020年09月28日 11:21:38 作者：桃李不言_下自成蹊
这篇文章主要为大家详细介绍了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键退出全拼显示
单击全屏显示右上角的那个关闭按钮，地图又回到初始的显示形式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
这篇文章主要介绍了IE11下CKEditor在Bootstrap Modal中下拉问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这是一款仿淘宝TAB切换搜索框，想搜索哪方面的内容就切换到哪一个，非常实用，喜欢的朋友可以看看2014-09-09
这篇文章主要介绍了JavaScript中获取纯正的undefined的方法的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了JS前向后瞻正则表达式定义与用法,分析了前向后瞻正则表达式的具体定义、功能及具体使用技巧,需要的朋友可以参考下2016-12-12
浅谈Javascript中Object与Function对象
JavaScript的面向对象是基于原形的，所有对象都有一条属于自己的原型链。Object与Function可能很多看Object instanceof Function ， Function instanceof Object都为true而迷惑，所以首先看下对象的实例2015-09-09
这篇文章主要介绍了JavaScript中操作Mysql数据库实例,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了微信小程序顶部导航栏滑动tab效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
在javascript中，hash指的是哈希表，是一种根据关键字直接访问内存存储位置的数据结构，hash就是一个赋值的方法，但实际用的并不需要太复杂，能用的就一点点，写法也非常简单，hash有多种写法，本文给大家介绍javascript hash使用，感兴趣的朋友一起看看吧2023-10-10
分享js粘帖屏幕截图到web页面插件screenshot-paste
这篇文章主要为大家分享了js粘帖屏幕截图到web页面插件screenshot-paste的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
在软件开发中,尤其是在中文处理的场景中,数字与语言的转换是一个常见且具有挑战性的任务,在一些业务系统中,可能需要将阿拉伯数字转换为中文数字,本文将介绍如何使用 JavaScript 将数字转换成中文,帮助开发者为相关的需求提供实现思路,需要的朋友可以参考下2024-12-12
最新评论