在隱藏元素中繪製OpenLayers 3地圖

我正在編寫一個頁面，您可以在其中查看有關區域和地圖的詳細信息。細節在一個標籤上，而在另一個標籤上。 HTML的相關部分在下面，並且類是從Bootstrap。在隱藏元素中繪製OpenLayers 3地圖

<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(); 
});

這使得當在地圖選項卡上單擊導致延遲小地圖。即使沒有選擇標籤頁，是否有加載它的方法？如果我嘗試這樣做，並且在選擇地圖選項卡時不重畫，那麼當我切換到地圖選項卡並且僅顯示放大和縮小按鈕時，畫布是空白的。

有沒有什麼辦法在一個不可見的元素中渲染地圖？

來源

2014-09-25 Andy Nichols

我有點晚看到這一點，但你嘗試過渲染全尺寸但不在屏幕上（例如，通過'left：-3000px'），然後切換到您的標籤時將其移動到位？ – kwah 2014-12-11 14:06:01

@kwah。感謝您的建議。我幾乎忘記了這個問題。現在代碼已經移動了一些（消耗從PostgreSQL幾何列計算的GeoJSON而不是從MySQL文本列的KML）。我已經接受了延遲，這並不是什麼大問題，但如果我重新考慮這個問題，我會嘗試解決您的問題。 – 2014-12-11 15:09:14

您可以在一個隱藏的容器初始化地圖，然後，當標籤被激活時，你可以在地圖上撥打updateSize：

map.updateSize()

來源

2014-09-26 12:38:02 tsauerwein

謝謝，這將適用於很多情況，但對我來說有問題。問題是我現在正在創建一個矢量源並調用fitExtent來放大矢量。當我調用map.updateSize（）時，這會重置。使製圖變化事件（shown.bs.tab）可用的地圖和源代碼意味着使它們成爲全局變量，它們當前是本地變量。我將更新我的問題，並提供更多詳細信息。 – 2014-09-26 16:07:05

在隱藏元素中繪製OpenLayers 3地圖

回答

相關問題