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

        $(‘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();

1. //将全屏显示控件加载到map中
2. map.addControl(fullScreenControl);

转载自：https://blog.csdn.net/pdw521/article/details/80995903