传单地图，无法正确渲染图块

Question

我正在使用 leafletjs 作为我的应用程序的地图功能。安装好了，写了一些简单的代码，看一张图。虽然图块没有正确渲染

即使我拖到另一个地方，它仍然缺少一块块瓷砖。这是我的代码

超文本标记语言

<div #map style="width:100%; height:100%;"
leaflet
(leafletMapReady)="onMapReady($event)"
[leafletOptions]="options">
</div>

TS

import { Component, OnInit } from '@angular/core';
import { latLng, MapOptions, tileLayer } from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  options: MapOptions;

  constructor() { }

  ngOnInit(): void {
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...', minZoom: 5 })
      ],
      zoom: 5,
      center: latLng(46.879966, -121.726909)
    };
  }

  onMapReady(map) {
    console.log("SHITS HERE DUMBAASS");
    setTimeout(() => {map.invalidateSize(true)}, 1000);
    // map.invalidateSize(true);
  }
}

如您所见，我还有在其他帖子中看到的 onMapReady() 函数。我帮助正确加载地图，但是当我切换到不同的组件时，我又变得不稳定了。

更新： 缩小浏览器页面，使地图加载一段时间正常。问题可能出在 CSS 上，仍将进行更多调查

更新2： 所以我这样做了

  ngAfterViewChecked(): void {
    this.map.invalidateSize(true);
    //this.map.center = this.center;
  }

这使得瓷砖负载。但我想知道为什么 (leafletMapReady) 没有“触发”地图无效？

谢谢！！！

Answer 1

我通过将其包含在组件顶部来解决这个问题： import 'leaflet/dist/leaflet.css';

它只需要传单中的样式和文档，但对此很模糊。