本文实例为大家分享了Openlayers实现地图全屏显示的具体代码,供大家参考,具体内容如下
1,新建一个html页面,引入ol.js和ol.css文件,然后在身体中创建一个div标签,用来作为地图加载的容器;
2代码实现
& lt; !DOCTYPE html>
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title> & lt;/title>
& lt;链接的href=" https://www.yisu.com/css/ol.css " rel=巴獠縩ofollow”rel="样式表"/比;
& lt;脚本src=" https://www.yisu.com/lib/ol/ol.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
窗口。onload=function () {//实例化全屏显示控件
var fullScreenControl=new ol.control.FullScreen ();//实例化地图
var=new ol.Map地图({
目标:“地图”,
层:[
新ol.layer.Tile ({
来源:新ol.source.OSM ()
})
),
观点:新ol.View ({
中心:12900000,4900000,
变焦:8
})
});//将全屏显示控件加载到映射中
map.addControl (fullScreenControl);
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id="地图"祝辞& lt;/div>
& lt;/body>
& lt;/html>
3,结果展示
地图初始化的时候,在右上角多了一个全屏显示的图标
单击这个图标,将会在整个屏幕显示当前的地图,并提示按esc键退出全拼显示
单击全屏显示右上角的那个关闭按钮,地图又回到初始的显示形式
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
