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

【问题标题】：I can't display the openlayer map properly until after a window resize在调整窗口大小之前，我无法正确显示 openlayer 地图
【发布时间】：2020-07-01 15:53:45
【问题描述】：

我这样设置地图：

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

在打开页面时，我得到了这个：

before resizing

于是我打开控制台让页面变小，地图加载完毕：

after resizing

你知道如何解决它吗？

【问题讨论】：

好像是时序问题，能不能把地图绑定的组件的代码加一下
其实我在 on-init 钩子里设置了地图

标签： angular typescript ionic-framework openlayers

【解决方案1】：

我做了以下事情：

import { AfterViewInit, Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, AfterViewInit {
  map!: Map;

  ngOnInit(): void {
    let view = new View({
      center: [0, 0],
      zoom: 1,
    });

    let layers = [
      new TileLayer({
        source: new OSM(),
      }),
    ];

    this.map = new Map({
      view: view,
      layers: layers,
      target: 'ol-map',
    });

    this.map.updateSize();
  }

  ngAfterViewInit(): void {
    this.map.updateSize();
  }
}

我认为这是解决此问题的一种简洁方法，因为在ngOnInit 中，我们定义了地图，并且我们只需在视图初始化后更新它的大小。简单有效。

【讨论】：

【解决方案2】：

我正在更新窗口然后它可以工作

setTimeout(() => {
        oMap.updateSize();
    }, 0);

【讨论】：

【解决方案3】：

我为我解决了这个问题。这实际上是一个时间问题。解决方案如下：我在 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);

【讨论】：

【解决方案4】：

一年多以前，我回答了一个类似的问题。看问题Angular 6 - Rendering problems if BrowserAnimationsModule imported (Openlayers) 。

在那里你会找到几个解决方案，一个使用组件的OnInit 方法加上ViewChild 来获取引用元素来绑定地图。另一个提案使用AfterViewInit。

【讨论】：