Ionic-Framework (4) - Openlayers 地图不工作/不可见答案

【问题标题】：Ionic-Framework (4) - Openlayers map not working/visibleIonic-Framework (4) - Openlayers 地图不工作/不可见
【发布时间】：2019-06-03 23:31:11
【问题描述】：

我尝试将 Openlayers 与 Ionic 一起使用，但地图在 setTimeout 之前不可见..

这是我的工作代码：

import { Component, OnInit } from '@angular/core';

import OlMap from 'ol/map';
import OlOSM from 'ol/source/osm';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import OlProj from 'ol/proj';

@Component({
  selector: 'app-tab1',
  template: '<ion-content><div id="map" class="map"></div></ion-content>',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit {
  map: OlMap;
  ngOnInit() {
    const layer = new OlTileLayer({
      source: new OlOSM({ url: 'https://{a- b}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png' })
    });

    setTimeout(() => this.map = new OlMap({
      target: 'map',
      layers: [layer],
      view: new OlView({ zoom: 13, center: OlProj.fromLonLat([42, 10]) }),
      controls: []
    }), 0);
  }
}

app.module.ts:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

但是如果我不使用setTimeout，地图是不可见的……

我也尝试将代码放在 NgAfterViewInit 中，但这也不起作用。

对我来说，使用 setTimeout 似乎是一个肮脏的解决方法。有谁知道为什么会出现这个问题或如何以更好的方式解决它？

（我的行为与 Angular 和 BrowserAnimationsModule 的行为相似。see here）

【问题讨论】：

标签： angular ionic-framework settimeout openlayers

【解决方案1】：

使用我最近在您提到的答案中发布的答案创建一个组件

https://stackoverflow.com/a/54281422/2701198

然后在您的页面中使用该组件。

希望对您有所帮助。

【讨论】：