时间戳

首页 > 解决方案 > 传单地图，未正确渲染图块

typescript - 传单地图，未正确渲染图块

问题描述

我正在为我的应用程序的地图功能使用leafletjs。安装好了，写了一些简单的代码，看看地图。虽然瓷砖没有正确渲染

传单地图

即使我拖到另一个地方，它仍然缺少一些瓷砖。这是我的代码

HTML

<div #map style="width:100%; height:100%;"
leaflet
(leafletMapReady)="onMapReady($event)"
[leafletOptions]="options">
</div>

TS

import { Component, OnInit } from '@angular/core';
import { latLng, MapOptions, tileLayer } from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  options: MapOptions;

  constructor() { }

  ngOnInit(): void {
    this.options = {
      layers: [
        tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...', minZoom: 5 })
      ],
      zoom: 5,
      center: latLng(46.879966, -121.726909)
    };
  }

  onMapReady(map) {
    console.log("SHITS HERE DUMBAASS");
    setTimeout(() => {map.invalidateSize(true)}, 1000);
    // map.invalidateSize(true);
  }
}

如您所见，我还拥有在其他帖子中看到的 onMapReady() 函数。我帮助正确加载地图，但是当我切换到不同的组件时，我又回到了不稳定状态。

更新： 缩小浏览器页面，使地图加载一段时间正常.. prolly 问题出在 CSS 上，仍将调查更多

更新2： 所以我这样做了

  ngAfterViewChecked(): void {
    this.map.invalidateSize(true);
    //this.map.center = this.center;
  }

这使得瓷砖加载。但我想知道为什么 (leafletMapReady) 没有“触发”地图无效？

谢谢！！！

标签： typescriptleafletangular8

解决方案

推荐阅读