Add Leaflet Overlay Создает нежелательный 2-й селектор карт

Question

Я добавляю оверлеи к существующей карте листовки. В первый раз, когда я делаю это, я добавляю только разные типы карт и получаю селектор листов в правом верхнем углу.

Позже, в другом классе, который имеет доступ к созданному объекту карты, я хочу добавить еще несколько слоев LayerGroups в качестве оверлеев, чтобы они отображались под картами как элементы-флажки. После добавления я получаю новый селекторный элемент управления на карте. Я получаю по одному на каждый добавляемый элемент наложения.

Я хочу, чтобы все новые наложения отображались только на одном селекторе карт. Что я делаю неправильно? Спасибо.

  ngOnInit() 
  {
    var streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    { 
      id: '12', attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    });

    this.map = L.map('map', 

    // Add the map layers.
    {
      center: [37.70718665682654, -98.701171875], // center in USA
      zoom: 5,
      layers: [streetMaps]
    });
    L.control.layers(this.GetGoogleBasemaps()).addTo(this.map);

  }

Позже я создаю новую группу слоев, показанную ниже, и добавляю ее на карту, но теперь я получаю два виджета Selector на карте. Один для слоев карт и один для моего нового наложения. На рисунках ниже показаны два разных селектора. Я хочу только один с картами и новым наложением в нем.

    DisplayAllWellLocations(result: any) {
      if(this.wellsLayer == null) {
        this.wellsLayer = new L.LayerGroup<L.Circle>();
      }
      else {
        this.wellsLayer.clearLayers();
      }
      let wells: string[] = result;

      var wellsRenderer = L.canvas({ padding: 0.5 });
      for (let well of wells) {

        let wellJsonString: string = well;
        let jsonObj = JSON.parse(wellJsonString);
        let lgt: number = jsonObj.X;
        let lat: number = jsonObj.Y;
        let wellName: string = jsonObj.Name;
        let wellId: string = jsonObj.Identifier;

        L.circle([lat, lgt], 
        {
          radius: 5,
          renderer: wellsRenderer,
          color: '#000000',
          fillColor: '#006400',
          fillOpacity: 1, 
          weight: 1
        }).addTo(this.wellsLayer).bindPopup(wellName + " (" + wellId + ")");
      }

      var overlays = {
        "All Wells": this.wellsLayer
      };

    var baseLayers = {};


    L.control.layers(baseLayers, overlays).addTo(this.map);
  }

Answer 1

Я наконец понял это. После того, как я изначально создаю свою карту и добавляю начальные слои следующим образом:

    var streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    { 
      id: '12', attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    });

    this.map = L.map('map', 
    {
      center: [37.70718665682654, -98.701171875], // center in USA
      zoom: 5,
      layers: [streetMaps], 
    });

    let layerControl: L.Control.Layers = L.control.layers(this.GetGoogleBasemaps()).addTo(this.map);
    this.drawService = new DrawService(this.map, this.dataService, layerControl);

, я получаю ссылку на layerControl и передаю ее в DrawService, как показано в последней строке выше.

Затем в DrawService я добавляю все новые слои на карту, а затем вызываю метод addOverlay L.Control.Layers, например:

      this.wellsLayer.addTo(this.map);
      this.controlLayer.addOverlay(this.wellsLayer, "All Wells");

Окончательный результат показан ниже.