OpenLayers 3＆Ionic 2、読み込み後に表示されない

Question

OLY3をIonic 2アプリケーションに統合するために、このトピックの解決策（Ionic 2 Beta and Open Layers 3 not loading map 3）に従ったが、問題がある。私が奉仕すると、地図はロードされますが、それは視覚的に空です。ブラウザを表示させるためにブラウザのサイズを変更する必要があります。だから私はそれがリフレッシュの問題だと思っています... 私はイオニックとアングルで新しいので、ここにいます:)。何か手掛かりはありますか？ありがとう！

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

home.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クラスを利用することができます。

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

を