Typescript 添加传单覆盖创建不需要的第二个地图选择器

我正在向现有传单地图添加覆盖图。第一次这样做时，我只添加了不同的地图类型，并在右上角获得了传单选择器

稍后，在另一个可以访问创建的map对象的类中，我想添加更多图层组作为覆盖，以便它们作为复选框项显示在地图下方。添加它们之后，我在地图中获得了一个新的选择器控件。我添加的每个叠加项都有一个

我希望所有新的覆盖图只显示在一个地图选择器上。我做错了什么？谢谢

  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);

  }

ngOnInit（）
{
var streetMaps=L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
{ 
id:'12'，归属：'©贡献者'
});
this.map=L.map（'map'，
//添加地图图层。
{
中心：[37.70718665682654，-98.701171875]，//美国中心
缩放：5，
图层：[街道地图]
});
L.control.layers（this.GetGoogleBasemaps（））.addTo（this.map）；
}

稍后，我创建了一个新的LayerGroup，如下所示，并将其添加到地图中，但现在我在地图上得到了两个选择器小部件。一个用于贴图层，另一个用于我的新覆盖。下图显示了两个不同的选择器。我只想要一个有地图和新覆盖的

    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);
  }

DisplayAllWellLocations（结果：任意）{
if（this.wellsLayer==null）{
this.wellsLayer=新的L.LayerGroup（）；
}
否则{
this.wellsLayer.clearLayers（）；
}
let wells:string[]=结果；
var wellsRenderer=L.canvas（{padding:0.5}）；
为了（让井中之井）{
让wellJsonString:string=well；
让jsonObj=JSON.parse（wellJsonString）；
设lgt:number=jsonObj.X；
设lat:number=jsonObj.Y；
让wellName:string=jsonObj.Name；
让wellId:string=jsonObj.Identifier；
L.圆（[lat，lgt]，
{
半径：5，
渲染器：Wellsrender，
颜色：'#000000'，
填充颜色：'#006400'，
不透明度：1，
体重：1
}).addTo（this.wellsLayer）.bindPopup（wellName+“（“+wellId+”））；
}
变量覆盖={
“所有的井”：这个。井杀手
};
var baseLayers={}；
L.control.layers（基本层、覆盖层）.addTo（此.map）；
}

---

我终于明白了。最初创建地图并添加初始图层后，如下所示：

    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);

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

最终结果如下所示