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键退出全拼显示
单击全屏显示右上角的那个关闭按钮，地图又回到初始的显示形式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
话说最近在研究某著名跟踪系统，在其给用户的实施代码中有一段判断浏览器Javascript版本的代码引起了我的注意，于是问了下google如何判断浏览器的javascript版本2010-09-09
javascript获取时间、时间戳等,最核心的就是利用Date关键词去获取,时间戳的获取方式整理了5种方法,后4种是利用new Date()实例化对象来获取当前时间,再对当前获取的时间再进一步处理获取时间戳,本文给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了基于Bootstrap3表格插件和分页插件实例详解的相关资料,需要的朋友可以参考下2016-05-05
这篇文章主要为大家详细介绍了canvas滤镜效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JS中处理日期时间常用Date对象,下面这篇文章主要给大家介绍了关于利用js获取当前日期昨天、今天、明天日期的不同方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-11-11
下面小编就为大家带来一篇阻止表单提交按钮多次提交的完美解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧，祝大家游戏愉快哦2016-05-05
本文给大家总结了js编码规范知识，非常实用，在日常程序开发中经常可以用到，大家务必掌握2016-06-06
这篇文章主要介绍了SWFObject基本用法,实例分析了SWFObject操作Flash文件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JS实现含有中文字符串的友好截取功能,结合实例形式分析了JS针对含有中文的字符串截取操作相关原理与实现技巧,需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了JavaScript Canvas绘制动态线框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论