angular - 在调整窗口大小之前，我无法正确显示 openlayer map

Question

我这样设置 map :

this.map = new Map({
  target: 'map',
  layers: [new TileLayer({source: new OSM()})
  ],
  view: new View({
    center: [0, 0],
    zoom: 16,
  })
});

打开页面我得到这个:

before resizing

所以我打开控制台来缩小页面并加载 map :

after resizing

你知道怎么解决吗？

Answer 1

我为我解决了这个问题。这实际上是一个时间问题。解决方案如下:我在 html 元素上插入了一个 ng-if 。并在一秒超时后设置 map 的目标。

html:

<ion-item *ngIf="loaded">
  <div id="map" [ngClass]="{'map': loaded}"></div>
</ion-item>

.ts:

this.map = new Map({
  view: new View({
    center: [0, 0],
    zoom: 16,
    minZoom: 2,
    maxZoom: 19
  }),
  layers: [
    new TileLayer({
      source: new OSM()
    }),
  ]
});
this.loaded = true;
setTimeout(() => {
  this.map.setTarget(document.getElementById('map'));
}, 1000);