时间戳

首页 > 解决方案 > 切换基础层时更改覆盖层

leaflet - 切换基础层时更改覆盖层

问题描述

我已经建立了一个带有两个基础层的传单地图，每个基础层都有自己独特的兴趣点。兴趣点被存储为我循环的 geojson 以为不同类别创建多个叠加层。因此，在查看默认基础层时，您会看到 Show All、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());
});

标签： leaflet

解决方案

您可以创建全局变量调用“覆盖”，并像下面的示例一样将其删除。

这是一个类似的例子来说明你的问题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]);
}

推荐阅读