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

Question

我正在写一个页面,您可以在其中查看有关区域和地图的详细信息.详细信息在一个选项卡上,而地图在另一个选项卡上.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();
});

这会在单击地图选项卡时呈现地图,从而导致较小的延迟.即使没有选中标签,有没有办法加载它？如果我尝试并且在选择地图选项卡时不重绘,那么当我切换到地图选项卡并且仅显示放大和缩小按钮时,画布为空白.

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

Answer 1

您可以在隐藏容器中初始化地图,然后在激活选项卡时,您可以在地图上调用updateSize:

map.updateSize()