OpenLayer4地图全屏的实现

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

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

var fullScreenControl = new ol.control.FullScreen();

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