同一页面上的多个 Ngx-leaflets 地图：所有图块都显示在同一张地图上

Question

我正在将标准 angular 项目转换为 Angular 通用项目，因此我必须摆脱“$window”。该项目没有使用任何但使用的一些模块，如传单，正在使用它，所以我切换到ngx-leaflet。

该组件仅访问@types\leaflet 对象来生成配置，地图生成留给 html 使用 ngx-leaflet 指令：传单。 html如下：

<div class="row w75 justify-content-center mb-5">
  <div class="content-wrapper col-lg-9 col-sm11" >
    <h3  class="center-title text-uppercase">Country locations</h3>
    <div class="title-block2"></div>
      <div id="map" leaflet [leafletOptions]="options" style="min-height: 700px">
      </div>
  </div>
</div>
<div class="row justify-content-center mt-3 mb-5">
  <div class="content-wrapper col-12" >
    <h3  class="center-title text-uppercase">Woldwide locations</h3>
    <div class="title-block2"></div>
    <div id="map2" leaflet  [leafletOptions]="options2" style="min-height: 700px">
    </div>
  </div>
</div>

结果是确实出现了 2 个地图，每个地图都有其标记和功能弹出窗口，但只有第一个地图显示了实际的地图图块，并且实际上显示了 2 个地图的所有图块，所以第二张地图只是gey backfgound。

我在使用 ngx-leaflet 时是否遗漏了什么？例如：[containerId]="'map'" ?

控制器如下：

import {Component, OnInit} from '@angular/core';
import {icon, popup, marker, latLng, tileLayer, layerGroup, polyline,
  Polyline, LayerGroup, LatLng, TileLayer} from 'leaflet';
@Component({
  selector: 'app-map',
  templateUrl: './coverage.component.html',
  styleUrls: ['./coverage.component.scss']
})


export class CoverageComponent implements OnInit {
  title = 'leafletApps';
  popup = popup();
  width = window.innerWidth;
  polylinePoints: LatLng[] = [];
  polyline: Polyline;
  assetLayerGroup: LayerGroup = layerGroup();
  assetLayerGroup2: LayerGroup = layerGroup();
  myTitleLayer: TileLayer = tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png',
    { attribution: '© Angular LeafLet' });
  options: {layers: any[], zoom: number, center: LatLng , dragging: boolean,
            scrollWheelZoom: boolean } =
    {
      layers: [this.myTitleLayer, this.assetLayerGroup],
      zoom: 6,
      dragging: (this.width > 992),
      scrollWheelZoom: false,
      center: latLng(4.7110, -74.0721)
    };
  options2: {layers: any[], zoom: number, center: LatLng ,
             dragging: boolean, scrollWheelZoom: boolean } =
        {
          layers: [this.myTitleLayer, this.assetLayerGroup2],
          zoom: 3,
          dragging: (this.width > 992),
          scrollWheelZoom: false,
          center: latLng(20, 0)
        };
      constructor() {}
  ngOnInit() {
    this.assetLayerGroup = this.fillMap1();
    this.options.layers.push(this.myTitleLayer);
    this.options.layers.push(this.assetLayerGroup);
    this.assetLayerGroup2= this.fillMap2();
    this.options2.layers.push(this.myTitleLayer);
    this.options2.layers.push(this.assetLayerGroup2);
  }
}

知道错误在哪里吗？

Answer 1

好吧，在输入问题时我找到了答案.... 但我还是发布了这个问题，以防有人遇到这个问题：

图块放置在实际上是“tileLayer”的“titleLayer”上。我的拼写错误引发了错误，认为这只是标题。因此，由于我的组件没有复制图块层，而是对 2 个地图使用了相同的图块层，这就是问题所在。

解决方案是创建 2 个图块图层 objects，即使它们具有相同的内容并将每个图层分配给不同的地图...

正确的组件代码如下：

import {Component, OnInit} from '@angular/core';
import {icon, popup, marker, latLng, tileLayer, layerGroup, polyline,
  Polyline, LayerGroup, LatLng, TileLayer} from 'leaflet';
@Component({
  selector: 'app-map',
  templateUrl: './coverage.component.html',
  styleUrls: ['./coverage.component.scss']
})


export class CoverageComponent implements OnInit {
  title = 'leafletApps';
  popup = popup();
  width = window.innerWidth;
  polylinePoints: LatLng[] = [];
  polyline: Polyline;
  assetLayerGroup: LayerGroup = layerGroup();
  assetLayerGroup2: LayerGroup = layerGroup();
  myTileLayer1: TileLayer = tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png',
    { attribution: '© Angular LeafLet' });
  myTileLayer2: TileLayer = tileLayer('https://tiles.stadiamaps.com/tiles/osm_bright/{z}/{x}/{y}{r}.png',
    { attribution: '© Angular LeafLet' });
  options: {layers: any[], zoom: number, center: LatLng , dragging: boolean,
            scrollWheelZoom: boolean } =
    {
      layers: [this.myTileLayer1, this.assetLayerGroup],
      zoom: 6,
      dragging: (this.width > 992),
      scrollWheelZoom: false,
      center: latLng(4.7110, -74.0721)
    };
  options2: {layers: any[], zoom: number, center: LatLng ,
             dragging: boolean, scrollWheelZoom: boolean } =
        {
          layers: [this.myTileLayer2, this.assetLayerGroup2],
          zoom: 3,
          dragging: (this.width > 992),
          scrollWheelZoom: false,
          center: latLng(20, 0)
        };
      constructor() {}
  ngOnInit() {
    this.assetLayerGroup = this.fillMap1();
    this.options.layers.push(this.myTileLayer1);
    this.options.layers.push(this.assetLayerGroup);
    this.assetLayerGroup2= this.fillMap2();
    this.options2.layers.push(this.myTileLayer2);
    this.options2.layers.push(this.assetLayerGroup2);
  }
}

同一页面上的多个 Ngx-leaflets 地图：所有图块都显示在同一张地图上

Multiple Ngx-leaflets maps on same page : all the tiles are displayed on the same map

angular

ngx-leaflet