如何触发OpenLayers 3全屏事件？

Question

我试图触发我的OpenLayers 3地图在代码中全屏显示，但我没有太多运气。

我有以下几点：

var fullScreenControl = new ol.control.FullScreen()

// Create map in between using fullScreenControl

fullScreenControl.changed();

代码完成任何事情。我尝试了fullScreenControl.dispatchEvent（＆＃39;更改＆＃39;）;也没有运气。我猜它并不太棘手，但所有其他问题似乎都围绕着检测事件而不是触发事件。

Answer 1

ol3使用＆＃34; HTML5＆＃34;全屏API以全屏模式切换地图。我不确定你想要完成什么，但有不同的方法可以切换全屏。

这是一个纯粹的js方法，用于全屏设置地图：

function setMapToFullScreen(){
  //if your map element id is other than 'map' change it here
        var elem = document.getElementById('map');
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
          elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
          elem.webkitRequestFullscreen();
        }   
}

这是一个fiddle，可以看到它的实际效果。

如果您计划在地图外部的DOM元素中附加全屏功能，则在全屏初始化期间始终可以使用target选项。如果您只想以编程方式执行此操作，请使用上面的函数。这取决于你想要达到的目标。