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

Question

我这样设置地图：

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

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

before resizing

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

after resizing

你知道如何解决吗？

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

Answer 2

一年多以前我回答过类似的问题。看看问题Angular 6 - 如果导入 BrowserAnimationsModule (Openlayers) 会出现渲染问题 .

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

Answer 3

我正在更新 window 然后就可以了

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

Answer 4

我做了以下事情：

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 中我们定义了地图，并且我们只在视图初始化后更新它的大小。简单有效。

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

I can't display the openlayer map properly until after a window resize

openlayers

typescript

ionic-framework

angular