OpenLayers 3 和 Ionic 2，加载后不显示

Question

为了将OL3集成到Ionic 2应用程序中，我遵循了此主题的解决方案（Ionic 2 Beta和Open Layers 3未加载映射3），但我遇到了一个问题。当我发球时，地图会加载，但在视觉上是空的。我必须调整浏览器的大小以使其显示出来。所以我想这是一个刷新问题。。。我是Ionic和Angular的新手，所以我在这里：）。你有线索吗？谢谢

map.component.ts

import {Component, ViewChild, Renderer} from '@angular/core';
declare var ol: any;
@Component({
  selector: 'olmap',
  template: '<div id="map" #map class="full-map" data-tap-disabled="true"></div>'
})
export class OLMap {
  @ViewChild('map') map;
  constructor(public renderer: Renderer) {
  }
  ngAfterViewInit() {
     var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
      var view = new ol.View({
        center: london,
        zoom: 6
      });
      var map = new ol.Map({
        target: 'map',
        layers: [layer],
        view: view
      });
  }
}

主页.ts

import {Page}   from 'ionic-angular';
import {OLMap} from './component/map.component';
@Page({
  templateUrl: 'build/pages/home/home.html',
  directives: [OLMap]
})
export class HomePage {
    constructor() {
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Test
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
    <olmap></olmap>
</ion-content>

在我的index.html 上

<script src="http://openlayers.org/en/v3.17.1/build/ol.js" type="text/javascript"></script>
<link type="text/css" href="https://openlayersbook.github.io/openlayers_book_samples/assets/ol3/css/ol.css" rel="stylesheet">
<link type="text/css" href="https://openlayersbook.github.io/openlayers_book_samples/assets/css/samples.css" rel="stylesheet">

Answer 1

我想这是一个变化检测的问题。也许您可以利用ChangeDetectorRef类的detectChanges方法。

@Component({
  selector: 'olmap',
  template: '<div id="map" #map class="full-map" data-tap-disabled="true"></div>'
})
export class OLMap {
  @ViewChild('map') map;
  constructor(public renderer: Renderer, private cdr: ChangeDetectorRef) { // <-----
  }
  ngAfterViewInit() {
     var layer = new ol.layer.Tile({
        source: new ol.source.OSM()
     });
     var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326', 'EPSG:3857');
     var view = new ol.View({
       center: london,
       zoom: 6
     });
     var map = new ol.Map({
       target: 'map',
       layers: [layer],
       view: view
     });
     this.cdr.detectChanges(); // <-----
  }
}

Answer 2

也许是OL3地图需要更新才能显示，请尝试添加：

map.updateSize();

创建地图后