OpenLayers 3 - 全屏按钮 - 图标在移动 Firefox 上不可见
OpenLayers 3 - full screen button - icon not visible on mobile Firefox
在移动设备上,OpenLayers 3 - 全屏图标,以防 Mozilla Firefox 不显示。
有没有办法解决这个问题或者自己设置一个图标在每台设备上显示?
谢谢,
埃卢尔
您可以使用 ol.control.FullScreen
的 label
和 labelActive
构造函数选项轻松设置自己的图标。
$('.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"/>');
}
}
使用 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 - 全屏图标,以防 Mozilla Firefox 不显示。
有没有办法解决这个问题或者自己设置一个图标在每台设备上显示?
谢谢,
埃卢尔
您可以使用 ol.control.FullScreen
的 label
和 labelActive
构造函数选项轻松设置自己的图标。
$('.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"/>');
}
}
使用 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' })