Angular + Leaflet：切换到使用相同地图的另一个路由组件时，地图容器已经初始化

Question

我是 Leaflet 的初学者，我遇到了这个问题。 在我的项目中，我有两个动态使用 Map 组件的路由页面。 地图组件是可重用的，并接收“数据”和“类型”属性作为输入，这会影响区域图层在地图上的显示方式。

第一个路由页面模板：

<div class="progetto-italiae-page">
  <div class="container d-flex justify-content-between">
    <router-outlet></router-outlet>
    <app-sidebar [navItems]="navItems"></app-sidebar>
  </div>
  <app-numbers-summary></app-numbers-summary>
  <app-map [data]="data" [type]="dataType"></app-map>
</div>

第二个路由页面模板：

<div class="linee-di-intervento-page">
  <div class="container d-flex justify-content-between">
   <router-outlet></router-outlet>
    <app-sidebar [navItems]="navItems"></app-sidebar>
  </div>
  <app-map [data]="data" [type]="dataType"></app-map>
</div>

这是地图组件的逻辑：

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})
export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input() data: any;
  @Input() type: string = '';

  private map: Map | undefined;
  private regions!: any;

  private initMap(): void {
    this.map = new Map('map', {
      center: [41.552, 12.574],
      zoom: 5,
      zoomControl: false,
    });

    new Control.Zoom({
      position: 'topright',
    }).addTo(this.map);

    const layer = new TileLayer(
      'http://a.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',
      {
        maxZoom: 18,
        minZoom: 3,
        attribution:
          '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      }
    );

    this.map.addLayer(layer);
  }

  private initRegionsLayer() {
    const layer = new GeoJSON(this.regions, {
      style: (feature) =>
        this.styleService.regionsStyleMaker(feature, this.data, this.type),
    });

    this.map?.addLayer(layer);
  }

  constructor(
    private shapeService: MapShapesService,
    private styleService: MapShapesStyleService
  ) {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    this.initMap();
    this.shapeService.getRegionsShapes().subscribe((regions) => {
      this.regions = regions;
      this.initRegionsLayer();
    });
  }

  ngOnDestroy(): void {
    if (this.map != null) {
      this.map.remove();
      this.map = undefined;
    }
  }
}

删除 ngOnDestroy 中的地图错误不再出现在控制台中，但现在我有另一个问题：

呈现地图的第一条路线正确加载它：

另一方面，如果我切换到必须渲染地图的第二条路线，则会显示一个空容器：

如何解决这个问题呢？

Answer 1

找到了解决方案，因为它有完全相同的问题！

问题在于地图的创建方式。

试试这样：

地图组件 HTML：

<div #mapContainer></div>

地图组件 TS：

@ViewChild('mapContainer') private mapContainer: ElementRef;
private map: any;

ngAfterViewInit(): void {
   this.map = L.map(this.mapContainer.nativeElement, {
      center: [41.552, 12.574],
      zoom: 5,
      zoomControl: false
   });
}