在openlayers標記中使用圖標時如何等待css

Question

在 openlayers (v4.6.4) 中，當我使用 font-awesome 作為標記圖標時，它們在第一次加載時不會出現（空緩存和硬重新加載）。 我看到的只是一個矩形，就像一個破碎的角色。 在第二次加載時，它們看起來很完美。

    var mapMarkerIcon = new ol.style.Style({
        text: new ol.style.Text({
            text: '\uf041 ', // <-- fa marker unicode
            font: 'Normal ' + 24 + 'px ' + 'FontAwesome',
            textBaseline: 'bottom',
            fill: new ol.style.Fill({
                color: green,
            })
        })
    });

我猜這是因為 openlayers 在 font-awesome css 有機會加載之前繪制了 unicode 圖標代碼。 在第二次刷新時，頁面緩存了 css，這就是它起作用的原因。

我不能要求我的所有用戶刷新一次。 有人知道如何解決這個問題嗎？

我可以強制 JS 等待 css 嗎？

我在想我現在只需要一個圖標（地圖標記）。 也許我可以加載這個以使其更快？ （我想即使那樣也不能保證在 JS 運行之前有 css）

我可以在幾毫秒后添加一點 javascript 來重繪圖標嗎？

Answer 1

這可能有點臟，但也許你想實現一個檢查，如http://allthingssmitty.com/2016/09/12/checking-if-font-awesome-loaded/中所述 。 只要返回true，就會初始化地圖。

PS您是否有使用圖標字體的特定原因？ 你為什么不使用SVG圖標？

Answer 2

您可以使用setTimeout重繪地圖

setTimeout(function(){ map.render(); }, 1000);

雖然最好在繪圖之前使用等待所有東西加載的東西。 如果您可以在此處使用jQuery，請參閱此處的最佳答案是否可以等到所有javascript文件都加載后再執行javascript代碼？

Answer 3

我有同樣的問題，我很難過看到沒有解決方案..