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

【问题标题】：Drawing an OpenLayers 3 map in a hidden element在隐藏元素中绘制 OpenLayers 3 地图
【发布时间】：2014-09-25 09:14:43
【问题描述】：

我正在编写一个页面，您可以在其中查看有关区域和地图的详细信息。详细信息在一个选项卡上，地图在另一个选项卡上。 HTML 的相关部分如下，类来自Bootstrap。

<div class="col-xs-8">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-details" data-toggle="tab">Details</a></li>
        <li><a href="#tab-map" data-toggle="tab">Map</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab-details" class="tab-pane fade in active"></div>
        <div id="tab-map" class="tab-pane fade">
            <div id="map-container" class="map"></div>
        </div>
    </div>
</div>

切片图层来自 OSM，矢量图层通过提供 KML 文件的 URL 加载。它使用OpenLayers 3.0.0 执行此操作，如下所示：

function ShowMap() {
    var area = $('#AreaCode').val();
    $('#map-container').empty();
    if (area != null && area != '') {
        var kmlUrl = '/kml?code=' + area;
        var tile = new ol.layer.Tile({ source: new ol.source.OSM() });
        var vectorSource = new ol.source.KML({ url: kmlUrl, projection: 'EPSG:3857' });
        var vector = new ol.layer.Vector({ source: vectorSource });
        vector.setOpacity(.3);
        var map = new ol.Map({
            target: 'map-container',
            layers: [tile, vector],
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });

        vector.addEventListener("change", function(event) {
            map.getView().fitExtent(vectorSource.getExtent(), map.getSize());
        });
    }
}

$('#tab-map-link').on('shown.bs.tab', function(event) {
    ShowMap();
});

这会在单击地图选项卡时呈现地图，从而导致一小段延迟。即使未选择选项卡，有没有办法加载它？如果我尝试这样做并且在选择地图选项卡时不重绘，那么当我切换到地图选项卡时画布是空白的，并且只显示放大和缩小按钮。

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

【问题讨论】：

我看到这个有点晚了，但是您是否尝试过将其渲染为全尺寸但在屏幕外（例如，通过left:-3000px），然后在切换到您的标签时将其移动到位?
@kwah。谢谢你的建议。我几乎忘记了这个问题。无论如何，代码现在已经移动了一点（使用从 PostgreSQL 几何列计算的 GeoJSON，而不是从 MySQL 文本列计算的 KML）。我已经接受了延迟，这不是什么大问题，但如果我重新审视这个问题，我会尝试你的解决方法。

标签： javascript openlayers-3

【解决方案1】：

你可以在一个隐藏的容器中初始化地图，然后，当标签被激活时，你可以在地图上调用updateSize：

map.updateSize()

【讨论】：

谢谢，这适用于很多情况，但对我来说有问题。问题是我现在正在创建一个矢量源并调用 fitExtent 来放大矢量。这在我调用 map.updateSize() 时被重置。使地图和源可用于选项卡更改事件（shown.bs.tab）意味着使它们成为当前本地的全局变量。我将用更多细节更新我的问题。

【解决方案2】：

在我的情况下，解决方案是使用超时等待 div 显示。

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

【讨论】：