Question

在移动设备上，OpenLayers 3 - 全屏图标，如果Mozilla Firefox没有显示。

有没有办法解决这个问题，或者自己设置一个图标以显示在每台设备上？

谢谢，

Eylul

Answer 1

您可以使用label的{{1}}和labelActive构造函数选项轻松设置自己的图标。

Answer 2

  $('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero');
  $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>');

  if (document.addEventListener)
  {
    document.addEventListener('webkitfullscreenchange', fullscreenHandler, false);
    document.addEventListener('mozfullscreenchange', fullscreenHandler, false);
    document.addEventListener('fullscreenchange', fullscreenHandler, false);
    document.addEventListener('MSFullscreenChange', fullscreenHandler, false);
  }

  function fullscreenHandler()
  {
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    {
      $('.ol-full-screen-true').attr('title', 'Chiudi la visualizzione a schermo intero');
      $('.ol-full-screen-true').html('<img src="icons/close_s.png"/>');

      $('.ol-full-screen-false').attr('title', 'Visualizza a schermo intero');
      $('.ol-full-screen-false').html('<img src="icons/fullscreen_s.png"/>');
    }
  }

Answer 3

使用Fontawesome扩展图标解决方案：

var fspan = document.createElement('i');
fspan.setAttribute('class', 'fa fa-expand');
...
// use it in map control definition
new ol.control.FullScreen({ label: fspan, tipLabel: 'Fullscreen' })

OpenLayers 3 - 全屏按钮 - 图标在移动Firefox上不可见

3 个答案: