[转]OpenLayer4地图全屏的实现

　　第一种方式：自实现

　　1.首先将地图容器的长宽设置成100%。

　　2.对form 和body标签长宽设置成100%。

　　3.对浏览器进行全屏设置。

　　具体代码如下所示（fullextent 为全屏安全ID。）：

　　　　$("#fullextent").click(function () {
        //alert("全屏");
        if ($("#fullextent").attr("src") != "Image/bk.png") {
            fullScreen();
            $("#fullextent").attr("src", "Image/bk.png");
        } else {
            exitFullScreen();
            $("#fullextent").attr("src", "Image/full1.png");
        }
        
    });

    // 全屏代码
    function fullScreen() {
        var elem = document.body;
        if (elem.webkitRequestFullScreen) {
            elem.webkitRequestFullScreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.requestFullScreen) {
            elem.requestFullscreen();
        } else {
            notice.notice_show("浏览器不支持全屏", null, null, null, true, true);
        }
        $('body,form').css({width:"100%",height:"100%"});
    }

　　// 退出全屏代码
    function exitFullScreen() {
        var elem = document;
        if (elem.webkitCancelFullScreen) {
            elem.webkitCancelFullScreen();
        } else if (elem.mozCancelFullScreen) {
            elem.mozCancelFullScreen();
        } else if (elem.cancelFullScreen) {
            elem.cancelFullScreen();
        } else if (elem.exitFullscreen) {
            elem.exitFullscreen();
        } else {
            notice.notice_show("浏览器不支持全屏", null, null, null, true, true);
        }
    }

　　上述的实现全屏的代码是让HTML标签的Body标签全屏显示。然而如果想让真正的地图控件全屏显示（实现类似OL自带的全屏控件的效果），则需要将这一句代码

var elem = document.body;

　　替换为代码：

var elem = document.getElementById('map');

 

　　第二种方式：通过ol自带控件实现全屏效果

var fullScreenControl = new ol.control.FullScreen();
//将全屏显示控件加载到map中
map.addControl(fullScreenControl);

 全屏的效果图如下所示：

 原文链接：OpenLayer4地图全屏的实现