openLayer地图全屏事件的监听

---

一、openLayer地图添加全屏控件

在进行全屏监听之前肯定需要给地图添加全屏控件，使之有全屏的功能

import { FullScreen } from 'ol/control'
map.addControl(new FullScreen())

二、添加全屏监听

1.引入库

import { FullScreen } from 'ol/control'

2.添加监听

let t=this
var fullScreenControl = new FullScreen()
this.map.addControl(fullScreenControl)

fullScreenControl.on('enterfullscreen', function() {
	//这里写进入全屏的时候（全屏时）的代码，注意this的指向会发生变化
  t.isFullScreen = true
})
fullScreenControl.on('leavefullscreen', function() {
	//这里写离开全屏的时候（非全屏时）的代码，注意this的指向会发生变化
  t.isFullScreen = false
})

后面再通过判断isFullScreen 的值就可以判定地图的全屏状态了。

三、Tips

小知识：现在谷歌浏览器在调用webkitRequestFullScreen进入全屏模式以后，其他外部元素没法显示出来。 所以给地图加的搜索框等在全屏时不生效，目前没找到解决办法，只能尽力避免。如果哪位小伙伴找到了解决办法，欢迎留言讨论！