Javascript 在隐藏元素中绘制OpenLayers 3地图

我正在写一个页面，你可以查看一个地区和一张地图的详细信息。详细信息在一个选项卡上，地图在另一个选项卡上。下面是HTML的相关部分，这些类来自

这会在单击“贴图”选项卡时渲染贴图，从而导致小延迟。是否有任何方法可以在未选择选项卡的情况下加载它？如果我尝试这样做，并且在选择“地图”选项卡时不重新绘制，那么当我切换到“地图”选项卡时，画布将为空，并且仅显示“放大”和“缩小”按钮

---

有没有办法在不可见的元素中渲染贴图？

您可以在隐藏容器中初始化贴图，然后在激活选项卡时，可以调用贴图：

map.updateSize()

---

在我的例子中，解决方案是使用超时等待显示div

setTimeout(function() {
    map.updateSize();
}, 100);

---

谢谢，这将在许多情况下很好地工作，但对我来说有问题。问题是我现在正在创建一个向量源，并调用fitExtent来放大向量。当我调用map.updateSize（）时，这会被重置。使映射和源可用于选项卡更改事件（如图所示.bs.tab）意味着使它们成为当前本地的全局变量。我将用更多的细节更新我的问题。我看到这一点有点晚了，但您是否尝试过将其呈现为全尺寸但不在屏幕上（例如，通过

左：-3000px

），然后在切换到选项卡时将其移动到位？@kwah。谢谢你的建议。我几乎忘记了这个问题。代码现在已经向前移动了一点（使用从PostgreSQL geometry列计算的GeoJSON，而不是从MySQL文本列计算的KML）。我已经接受了延迟，这不是什么大问题，但如果我再次讨论这个问题，我会尝试你的解决方法。

map.updateSize()

setTimeout(function() {
    map.updateSize();
}, 100);