Openlayers：更改全屏真按钮的图标

Question

我使用 Font Awesome 和 jquery:

将 openlayers (v6.3.1) 控件图标更改为自定义图标

$('button.ol-full-screen-true').html('<i class="fas fa-compress"></i>');
$('button.ol-full-screen-false').html('<i class="fas fa-expand"></i>');

这与 full-screen-false 按钮的预期一样。但是如果我切换全屏，full-screen-true 按钮不会改变。相反，它使用 full-screen-false Font Awesome 图标。如果我删除 full-screen-false 图标的代码，则会显示默认图标。我还尝试更改两个按钮的工具提示。它也只对 full-screen-false 控件有效。

我被困在这里，想不出（或找不到）任何其他解决方案。

Answer 1

我找到了一个不同的、更复杂的解决方案。

var fullscreenFalse = document.createElement('i');
fullscreenFalse.setAttribute('class', 'fa fa-expand');
var fullscreenTrue = document.createElement('i');
fullscreenTrue.setAttribute('class', 'fa fa-compress');

var fullscreen = new ol.control.FullScreen({
    source: document.getElementById('map').parentNode,
    label: fullscreenFalse,
    labelActive: fullscreenTrue
});

您可以使用以下代码更改工具提示：

fullscreen.on('enterfullscreen', function(evt){
    $('button.ol-full-screen-true').attr('title', 'Leave fullscreen');
});
fullscreen.on('leavefullscreen', function(evt){
    $('button.ol-full-screen-false').attr('title', 'Enter fullscreen');
});

Openlayers：更改全屏真按钮的图标

Openlayers: Change the icon of the full-screen-true button

javascript

jquery

openlayers

font-awesome