我正在编写一个页面,您可以在其中查看有关区域和地图的详细信息。详细信息位于一个选项卡上,地图位于另一个选项卡上。 HTML 的相关部分如下,类来自引导程序 http://getbootstrap.com/css/.
<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 http://openlayers.org/如下:
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();
});
单击地图选项卡时会渲染地图,从而导致轻微延迟。即使未选择选项卡,有什么方法可以加载它吗?如果我尝试这样做,并且在选择地图选项卡时不重绘,那么当我切换到地图选项卡时画布为空白,并且仅显示放大和缩小按钮。
有什么方法可以在不可见的元素中渲染地图吗?