在Angular 8中弹出的Leaflet.js (ngx-leaflet)地图切片加载不正确

Question

我正在使用ngx-leaflet与角度8来显示弹出窗口上的地图，但当我打开地图上的弹出窗口时，瓦片不能正确覆盖。我还使用了map.invalidateSize()。但是，它仍然不起作用。

​

​

显示弹出窗口的.html代码。

<div class="modal fade" id="collision1" role="dialog" aria-labelledby="toolenforces" aria-hidden="true">
    <div class="modal-dialog" role="document">
               <div class="row">
                 <div class="col-md-6" style="margin-top: 15px; margin-bottom: 15px;"> 
                    <div class="map1 records-map1" leaflet  [leafletOptions]="options4"
                   (leafletMapReady)="openCollision($event)"></div>
                 </div>
      </div>

​

.ts代码

  options4 = {
layers: [
  tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
  })
],
zoom: 7,
center: latLng([14.1111, 121.21111])};  

   openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 10);}

Answer 1

将超时设置为更高的延迟：

openCollision(map : L.Map){
           setTimeout(function() {
             map.invalidateSize();
            }, 500);}

Answer 2

这是我在这个问题上的诀窍：

async onMapReady(map: L.Map) {
  this.map = map;
  await this.delay(10);
  this.map.invalidateSize(false)
}

delay(ms: number) {
  return new Promise( resolve => setTimeout(resolve, ms) );
}