Leaflet + Ionic5 / Angular - 地图渲染不好 -

Question

在对它进行一些搜索但没有成功后，我来找你，因为我知道这有多种威胁，但正如我所说，那些并没有解决我的问题。

问题：
正如其他人所经历的那样，Leaflet 在地图和框架页面加载方面存在一些问题。

如果我手动调整浏览器屏幕的大小，它会正确呈现。

如果我重新加载 window 地图将不会呈现。

Example:

如您所见，控制台上当前没有可能导致此问题的错误，所以让我们转到代码。

代码：

我有一些注释代码，为此 post 删除了，但由于它是针对 >ionic serve 命令注释的，因此不应影响执行

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

  serviceRequestBoundsIcon = '../../../assets/custom/map-outline.svg';
  now: Date;
  private markers: L.Marker[] = [];
  private map: L.Map;
  private iconTruck = L.icon({
    iconUrl: '../../../assets/truck-39103_1280.png',
    iconSize: [40, 20],
    iconAnchor: [20, 10],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize: [41, 41]
  });
  private iconwatch = L.icon({
    iconUrl: '../../../assets/custom/map-outline.svg',
    iconSize: [40, 20],
    iconAnchor: [20, 10],
    popupAnchor: [1, -34],
    tooltipAnchor: [16, -28],
    shadowSize: [41, 41]
  });
  private watchSubscriber: Subscription;



  constructor() {
  }

  ngOnInit() {
    this.initMap();
    console.log('oninit');
  }

  ngAfterViewInit() {
    this.map.invalidateSize();
    console.log('view init');
  }

  private initMap(){

    this.map = L.map('map', {
      center: [ 49.00, 10.00 ],
      zoom: 6
    });
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      minZoom: 3,
      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    tiles.addTo(this.map);
  }

在这里，我尝试将 initMap() 和 this.map.invalidateSize() 移动到不同的挂钩（ngAfterViewInit、ngAfterContentInit、ngOnInit、构造函数），结果几乎相同，有时它可以工作，但在重新加载时停止工作...

这个angular 地图组件在ionic tabs generator 制作的location tab page 里面，location 模块上面没有逻辑。

我也尝试过在 SO 的 post 中创建的 MutationObserver 解决方案。目前没有使用。

private renderMap(){
    const observer = new MutationObserver(() => {
      console.log('init mutation');
      this.map.invalidateSize();
      observer.disconnect();
      console.log('cancel observer');
    });
    console.log('init observer');
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class'],
      childList: false,
      characterData: false,
    });
  }

里面index.html:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>

angular.json:

  "projects": {
"app": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "www",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "tsconfig.app.json",
        "assets": [
          {
            "glob": "**/*",
            "input": "src/assets",
            "output": "assets"
          },
          {
            "glob": "**/*.svg",
            "input": "node_modules/ionicons/dist/ionicons/svg",
            "output": "./svg"
          },
          {
            "glob": "**/*",
            "input": "node_modules/leaflet/dist/images/",
            "output": "assets"
          },
          "src/manifest.webmanifest",
          "src/manifest.webmanifest",
          "src/manifest.webmanifest",
          "src/manifest.webmanifest"
        ],
        "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "node_modules/leaflet/dist/leaflet.css", "src/theme/variables.scss", "src/global.scss"],
        "scripts": [],
        "aot": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "buildOptimizer": false,
        "sourceMap": true,
        "optimization": false,
        "namedChunks": true,
        "serviceWorker": true,
        "ngswConfigPath": "ngsw-config.json"
      },

我希望我能在社区的帮助下解决这个问题，我不明白这里会发生什么！如果需要更多详细信息，请随时询问，我会关注这个 post!

Answer 1

到目前为止，我已经能够通过添加 setTimeout(()=>{this.map.invalidateSize();},100) 来解决问题，我想知道是否有更好的解决方案，请告诉我！

Leaflet + Ionic5 / Angular - 地图渲染不好 -

Leaflet + Ionic5 / Angular - Map bad Rendering -

angular

ionic-framework

leaflet

ionic5

angular12