切换基层时改变覆盖层

Question

我已经建立了一个带有两个基本层的传单地图，每个基本层都有自己独特的兴趣点。感兴趣点被存储为geojson，我将其循环起来，为不同类别创建多个覆盖。因此，当查看默认的基本层时，您会看到所有显示层、Cat1层、Cat2层等。

我需要一种方法，能够将覆盖层附加到一个基本层，或删除所有的覆盖层，然后加载相关的层时，基本层的变化。

我尝试使用下面的方法来切换类别，使用baselayerchange事件，但是当我切换基本层时，覆盖层仍然在显示。

layerControl._layers.forEach(function(layer){
  if(layer.overlay){
    map.removeLayer(layer.layer)
  }
});

我已经找了几天没有任何运气的答案，任何帮助是非常感谢的。

编辑

发布上下文的附加代码。这不是代码的全部，有些插件我不包括代码，并且排除了几个变量的定义，但这应该能更好地了解事情是如何工作的。

//Initialize the map
var map = new L.Map('map', {
maxZoom: mapMaxZoom,
minZoom: mapMinZoom,
crs: crs1848,
attributionControl: false,
layers: [pano1848]
});

//add controls to the map
 var layerControl = L.control.layers(null, null, {position: 'bottomleft'}).addTo(map);

//building category layers from geojson
    var types = ['African Americans', 'Art Architecture Culture', 'Education Religion Reform', 'Everyday Life', 'Immigrants', 'Science Inventions', 'Transportation Industry Commerce'];
types.forEach(function(type){
  var catType = type.replace(/\s/g,"");
  var catPoints = L.geoJson(mapData, {
      filter: function(feature, layer){
        var cat = feature.properties['category'];
        return cat.indexOf(catType) >= 0;
      },
      onEachFeature: function (feature, layer) {
      layer.bindTooltip(feature.properties.name);

      (function(layer, properties){
        //Create Numeric markers
        var numericMarker = L.ExtraMarkers.icon({
          icon: 'fa-number',
          markerColor: 'yellow',
          number: feature.properties['id']
        });
        layer.setIcon(numericMarker);

        layer.on('click', function() {
        $.ajax({
          url:feature.properties['url'],
          dataType:'html',
          success: function(result){
            $('#detailContainer').html(result);
            $('#overlay').fadeIn(300);
          }
        });
      });   
      })(layer, feature.properties);
    }
  });
  layerControl.addOverlay(catPoints, catType);
});
  
  //Base Layer Change Event
  map.on('baselayerchange', function(base){
  var layerName;

  layerControl._layers.forEach(function(layer){
    if(layer.overlay){
      map.removeLayer(layer.layer)
    }
  });


  if(base._url.indexOf('1848') >= 0){
    map.options.crs = crs1848;
    map.fitBounds([
      crs1848.unproject(L.point(mapExtent1848[2], mapExtent1848[3])),
      crs1848.unproject(L.point(mapExtent1848[0], mapExtent1848[1]))
    ]);
    var southWest = map.unproject([0, 8192], map.getMaxZoom());
    var northEast = map.unproject([90112, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
    map.addLayer(allPoints);
    layerName = '1848 Panorama';
  }
  else if(base._url.indexOf('2018') >= 0){
    map.options.crs = crs2018;
    map.fitBounds([
      crs2018.unproject(L.point(mapExtent2018[2], mapExtent2018[3])),
      crs2018.unproject(L.point(mapExtent2018[0], mapExtent2018[1]))
    ]);
    var southWest = map.unproject([0, 8192], map.getMaxZoom());
    var northEast = map.unproject([49152, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
    layerName = '2018 Panorama'
  } 


  miniMap.changeLayer(minimapLayers[layerName]);
  //map.setView(map.getCenter(), map.getZoom());
});

Answer 1

您可以创建全局变量调用"overlays"，并将其删除，如下所示。

下面是说明问题jsFiddle的类似示例

​

var overlays = {
  'Name 1': catPoints,
  'Name 2': catType
};

L.control.layers(null, overlays).addTo(map);

// Whenever you want to remove all overlays:
for (var name in overlays) {
  map.removeLayer(overlays[name]);
}

​