如何在openlayers标记中使用图标时等待css
如何在openlayers标记中使用图标时等待css
提问于 2018-01-11 21:47:28
在openlayers (v4.6.4)中，当我使用令人敬畏的字体作为标记图标时，它们不会在第一次加载时出现(空缓存和硬重新加载)。我看到的只是一个矩形，就像一个破碎的字符。在第二次加载时，它们完美地出现了。
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在字体强大的css有机会加载之前就绘制了unicode图标代码。在第二次刷新时，页面缓存了css，这就是它工作的原因。
我不能要求所有用户都刷新一次。有人知道如何解决这个问题吗？
是否可以强制JS等待css？
我想我现在只需要一个图标(地图标记)。也许我可以加载这个让它更快？(我想即使到那时，也不能保证在JS运行之前就有css )
我可以添加一小段javascript来在几毫秒后重新绘制图标吗？
回答 2
Stack Overflow用户
发布于 2018-01-12 02:33:17
这可能有点脏，但是您可能想要实现一个像http://allthingssmitty.com/2016/09/12/checking-if-font-awesome-loaded/中描述的检查。一旦返回true，你就初始化你的map。
附注:你使用图标字体有什么特别的原因吗？为什么不使用SVG图标呢？
Stack Overflow用户
发布于 2018-01-12 12:14:33
您也许可以使用setTimeout重新绘制地图
setTimeout(function(){ map.render(); }, 1000);不过，最好是在绘制之前使用等待所有内容加载的内容。如果您可以在此处Is it possible to wait until all javascript files are loaded before executing javascript code?使用jQuery，请在此处查看最上面的答案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48208570
复制相关文章
相似问题
腾讯云开发者
