第一種方式：自實現

　　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);
        }
    }

　　第二種方式：通過ol自帶控制元件實現全屏效果

var fullScreenControl = new ol.control.FullScreen();
//將全屏顯示控制元件載入到map中
map.addControl(fullScreenControl);

原文連結：OpenLayer4地圖全屏的實現