OpenLayers 3 & Ionic 2, nicht angezeigt nach dem Laden

Question

Ich folgte der Lösung dieses Themas (Ionic 2 Beta and Open Layers 3 not loading map 3), um OL3 in eine Ionic 2 App zu integrieren, aber ich habe ein Problem. Wenn ich diene, lädt sich die Karte, aber sie ist visuell leer. Ich muss die Größe meines Browsers ändern, damit er angezeigt wird. Also ich stelle mir vor es ist ein Refresh Problem ... Ich bin neu mit Ionic und Angular, also hier bin ich :). Hast du eine Ahnung? Vielen Dank !

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> 

Und auf meine 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

Ich vermute, dass es ein Problem der Änderungserkennung ist. Vielleicht könnten Sie die detectChanges Methode der ChangeDetectorRef Klasse nutzen.

@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

vielleicht ist es die OL3 Karte, die aktualisiert werden muss angezeigt werden, versuchen Sie:

map.updateSize(); 

nach Ihrer Karte

Erstellen