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

您可以创建全局变量并称为“叠加层”，然后像下面的示例一样将其删除。

以下是用于说明您的问题的类似示例 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]);
}

切换基础层时更改覆盖层

编辑

1 个答案: