Leaflet.js (ngx-leaflet) 地图图块在 Angular 8 的弹出窗口中未正确加载 [英] Leaflet.js (ngx-leaflet) map tiles are not loaded properly in popup in Angular 8
本文介绍了Leaflet.js (ngx-leaflet) 地图图块在 Angular 8 的弹出窗口中未正确加载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用角度为 8 的 ngx-leaflet 在弹出窗口中显示地图,但是当我打开地图图块上的弹出窗口时,没有正确叠加.我还使用了 map.invalidateSize().但是,它仍然不起作用.
.html 代码来显示弹出窗口.
.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屋!
查看全文