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

问题描述

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

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

我想让所有新的叠加层只出现在一个地图选择器上。我究竟做错了什么？谢谢。

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

  }

稍后，我创建了一个新的 LayerGroup，如下所示，并将其添加到地图中，但现在我在地图上获得了两个 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);
  }

标签： typescriptleaflet

我终于弄明白了。在我最初创建我的地图并添加如下初始图层后：

    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 中，我将任何新图层添加到地图中，然后像这样调用 L.Control.Layers addOverlay 方法：

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

最终结果如下所示。

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

问题描述

解决方案

推荐阅读