一、自定义地图进入全屏、退出全屏，效果如下

1674026090361.png

1674026112039.png

二、获取当前全屏状态

getFullscreenElement () {
    let isFullscreen =
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement ||
    document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    return isFullscreen
  }

三、进入、退出全屏操作

 // 进入/退出全屏
  handleInOROutFullScreen () {
    this.isFullScreen = this.getFullscreenElement()
    if (window.ActiveXObject) { // IE 10及以下ActiveXObject
      const WsShell = new ActiveXObject('WScript.Shell')
      WsShell.SendKeys('{F11}')
    } else if (this.mapEle.requestFullScreen) { // HTML W3C 提议
      if (!this.isFullScreen) { // 进入
        this.mapEle.requestFullScreen()
      } else { //  退出
        document.exitFullscreen()
      }
    } else if (this.mapEle.msRequestFullscreen) { // IE11
      if (!this.isFullScreen) { // 进入
        this.mapEle.msRequestFullscreen()
      } else { //  退出
        document.msExitFullscreen()
      }
    } else if (this.mapEle.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
      if (!this.isFullScreen) { // 进入
        this.mapEle.webkitRequestFullScreen()
      } else { //  退出
        document.webkitCancelFullScreen()
      }
    } else if (this.mapEle.mozRequestFullScreen) { // Firefox (works in nightly)
      if (!this.isFullScreen) { // 进入
        this.mapEle.mozRequestFullScreen()
      } else { //  退出
        document.mozCancelFullScreen()
      }
    } else {
      alert('此设备不支持 Fullscreen API')
    }
  }

四、监听全屏事件

/**
   * 监听全屏事件
   */
  addFullScreenListener () {
    if (this.mapEle.requestFullScreen) { // HTML5 W3C 提议
      document.addEventListener('fullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.msRequestFullscreen) { // IE 11
      document.addEventListener('msfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.webkitRequestFullScreen) { // Webkit (works in Safari5.1 and Chrome 15)
      document.addEventListener('webkitfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else if (this.mapEle.mozRequestFullScreen) { // Firefox (works in nightly)
      document.addEventListener('mozfullscreenchange', () => {
        this.onFullScreenChange()
      })
    } else {
      document.addEventListener('webkitfullscreenchange', () => {
        this.onFullScreenChange()
      })
    }
  }

五、 全屏事件触发后操作函数

/**
   * 全屏事件触发后
   */
  onFullScreenChange () {
    this.fullScreen = this.getFullscreenElement()
    if (this.fullScreen) { // 全屏状态
      this.fullScreenEle.className = `ol-toolbar-exitFullScreen ol-toolbar-item ${this.fullScreenConfig.className}`
      this.fullScreenEle.innerText = this.fullScreenConfig.reduceLabel
    } else { // 退出全屏状态
      this.fullScreenEle.className = `ol-toolbar-fullScreen ol-toolbar-item ${this.fullScreenConfig.className}`
      this.fullScreenEle.innerText = this.fullScreenConfig.label
    }
  }