Листы карты Leaflet. js (ngx-leaflet) неправильно загружаются во всплывающем окне в Angular 8 - PullRequest
Новая
       73

Листы карты Leaflet. js (ngx-leaflet) неправильно загружаются во всплывающем окне в Angular 8

0 голосов
/ 25 мая 2020

Я использую ngx-leaflet с angular 8, чтобы показать карту во всплывающем окне, но когда я открываю всплывающее окно на карте, фрагменты карты не накладываются должным образом. Я также использовал map.invalidateSize (). Но все равно это не работает.

enter image description here

. 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: '&copy; OpenStreetMap contributors'
  })
],
zoom: 7,
center: latLng([14.1111, 121.21111])};  

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

1 Ответ

0 голосов
/ 25 мая 2020

установите для тайм-аута большую задержку: 

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