Angular 离子框架(4)-Openlayers地图不工作/可见
我尝试将Openlayers与Ionic一起使用,但直到设置超时,地图才可见 这是我的工作代码:Angular 离子框架(4)-Openlayers地图不工作/可见,angular,ionic-framework,settimeout,openlayers,Angular,Ionic Framework,Settimeout,Openlayers,我尝试将Openlayers与Ionic一起使用,但直到设置超时,地图才可见 这是我的工作代码: 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 f
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);
}
}
但是如果我不使用setTimeout,映射将不可见
我还尝试将代码放在NgAfterViewInit中,但这也不起作用
对我来说,使用setTimeout似乎是一个肮脏的解决方法。有人知道为什么会出现这个问题,或者如何更好地解决这个问题吗
(我发现Angular和BrowserAnimations具有类似的行为模式相同。)使用我最近在您提到的答案中发布的答案创建一个组件 然后在页面中使用该组件 希望能有帮助
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})