LeafletJS 直到移动地图才加载所有图块
[英]LeafletJS not loading all tiles until moving map
问题描述
I am trying to load a simple leaflet map in my Ionic 2 app.
我正在尝试在我的 Ionic 2 应用程序中加载一个简单的传单地图。 Unfortunately not all tiles are loaded currectly until a moving the map.不幸的是，在移动地图之前，并非所有图块都被正确加载。
this.map = new L.Map('mainmap', {
zoomControl: false,
center: new L.LatLng(40.731253, -73.996139),
zoom: 12,
minZoom: 4,
maxZoom: 19,
layers: [this.mapService.baseMaps.OpenStreetMap],
attributionControl: false
});
2 个解决方案
解决方案1
9 2018-11-28 03:09:55
There are a couple of solutions for this problem:这个问题有几个解决方案：
1- Add "./node_modules/leaflet/dist/leaflet.css" in the styles array in `angular.json'. 1-在`angular.json'的样式数组中添加"./node_modules/leaflet/dist/leaflet.css" 。
2- Invalidate size when a map is ready: 2-当地图准备好时使大小无效：
onMapReady(map: L.Map) {
setTimeout(() => {
map.invalidateSize();
}, 0);
}
Add this to your template:将此添加到您的模板中：
<div style="height: 300px;"
leaflet
(leafletMapReady)="onMapReady($event)">
</div>
And this will bind onMapReady method which you have in your component.这将绑定您在组件中拥有的onMapReady方法。
3- Install Leaflet typings for Typescript: 3-为 Typescript 安装传单类型：
npm install --save-dev @types/leaflet
Vanilla JavaScript:原生 JavaScript：
1- Validate the size of map: 1-验证地图的大小：
onMapReady(map: L.Map) {
setTimeout(() => {
map.invalidateSize();
}, 0);
}
2- Add leaflet stylesheet leaflet/dist/leaflet.css in the <head> of your document. 2-在文档的<head>中添加传单样式表leaflet/dist/leaflet.css 。
解决方案2
2 2021-01-18 09:27:51
this work for me fine :这对我来说很好：
this.map = L.map('map');
const self = this;
this.map.on("load",function() { setTimeout(() => {
self.map.invalidateSize();
}, 1); });
this.map.setView([36.3573539, 59.487427], 13);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.