在调整窗口大小之前，我无法正确显示openlayer地图 [英] I can't display the openlayer map properly until after a window resize

问题描述

我这样设置地图:

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

打开页面时，我得到以下提示:

On opening the page I get this:

调整大小之前

因此，我打开控制台以缩小页面并加载地图:

So I open the console to make the page smaller and the map is loaded:

调整大小后

您是否知道如何解决?

推荐答案

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

I solved the problem for me. It was actually a timing issue. The solution is the following: I inserted an ng-if on the html element. and set the target of the map after a one-second time-out.

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

这篇关于在调整窗口大小之前，我无法正确显示openlayer地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！