在调整窗口大小之前，我无法正确显示 openlayer 地图

Question

我这样设置地图：

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

打开页面后我得到这个：

调整大小之前

所以我打开控制台来缩小页面并加载地图：

调整大小后

您知道如何修复它吗？

Answer 1

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

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