Leaflet.js (ngx-leaflet) 地图图块在 Angular 8 的弹出窗口中未正确加载 [英] Leaflet.js (ngx-leaflet) map tiles are not loaded properly in popup in Angular 8

问题描述

我正在使用角度为 8 的 ngx-leaflet 在弹出窗口中显示地图，但是当我打开地图图块上的弹出窗口时，没有正确叠加.我还使用了 map.invalidateSize().但是，它仍然不起作用.

.html 代码来显示弹出窗口.

<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" 传单 [leafletOptions]="options4"(leafletMapReady)="openCollision($event)"></div>

.ts 代码

 options4 = {层数:[tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {归属:'©OpenStreetMap 贡献者})],变焦:7，中心:latLng([14.1111, 121.21111])};openCollision(地图:L.Map){设置超时(函数(){map.invalidateSize();}, 10);}

解决方案

这是我针对这个问题的技巧:

async onMapReady(map: L.Map) {this.map = 地图;等待 this.delay(10);this.map.invalidateSize(false)}延迟(毫秒:数字){return new Promise( resolve => setTimeout(resolve, ms) );}

I'm using ngx-leaflet with angular 8 to show the map on the popup, but when I open the popup on map tiles are not overlay properly. I also used map.invalidateSize(). But still, it's not working.

.html code to show the popup.

<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 code

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

解决方案

This my tricks for this issue:

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

这篇关于Leaflet.js (ngx-leaflet) 地图图块在 Angular 8 的弹出窗口中未正确加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！