复选框中的叠加地图仅显示第一个基本地图

复选框中的叠加图仅适用于单击控制图层中的第一个基本地图，我可以在第二个基本地图上看到归因，但不能看到地图本身。 我正在与传单工作似乎相当奇怪…………………………………… ………………………………………….. 。

var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { minZoom : 6, maxZoom: 17, attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); var googleTerrain = L.tileLayer('http://{s}.google.com/vt/lyrs=p&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }); var map = L.map("mapid", { zoom: 10, center: [55.7363, -6.1771], layers: [ googleearth, googleTerrain], zoomControl: false, attributionControl: true, measureControl: true }); var baseLayers = { "Aerial Imagery": googleearth, "googleTerrain":googleTerrain }; L.control.layers(baseLayers,null,{collapsed:false}).addTo(map); var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { maxZoom: 17, visibility: true, attribution: 'Map data: © OpenStreetMap, SRTM | Map style: © OpenTopoMap (CC-BY-SA)' }); $(document).ready(function(){ $("#layercontrol2").change(function(){ if($(this).prop("checked")){ OpenTopoMap.addTo(map); return; }else { OpenTopoMap.remove(); return; } }); }); 

          
 
  Topo Map 
  
   

Answer 1

如果让autoZIndex选项为true （默认值），Leaflet Layers Control会自动管理传递给它的图层的z-index ：

如果为true ，则控件将zIndexes按递增顺序分配给其所有图层，以便在打开/关闭它们时保留顺序。

所以你的2 Tile Layers googleearth和googleTerrain的z-index分别为1和2。

现在你的第3个Tile Layer（ OpenTopoMap ，你尝试用自己的复选框在外部管理的那个）只有一个z-index为1（默认值），因此它将位于googleTerrain下面。

解决方案只是为第3个Tile Layer OpenTopoMap指定一个高z-index值。

您还可以将autoZIndex为false ，以便所有Tile Layers的默认z-index值都为1，在这种情况下，最后添加的Tile Layer将显示在顶部。

 var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { minZoom: 6, maxZoom: 17, attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community' }); // Note: replacing the Tile Server to comply with Google Maps Terms. var googleTerrain = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }); var map = L.map("mapid", { zoom: 10, center: [55.7363, -6.1771], layers: [googleearth, googleTerrain], zoomControl: false, attributionControl: true, measureControl: true }); var baseLayers = { "Aerial Imagery": googleearth, "googleTerrain": googleTerrain }; L.control.layers(baseLayers, null, { collapsed: false, //autoZIndex: false, }).addTo(map); var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { zIndex: 100, // Make sure you specify a high enough value. maxZoom: 17, visibility: true, attribution: 'Map data: © OpenStreetMap, SRTM | Map style: © OpenTopoMap (CC-BY-SA)' }); $(document).ready(function() { $("#layercontrol2").change(function() { if ($(this).prop("checked")) { OpenTopoMap.addTo(map); return; } else { OpenTopoMap.remove(); return; } }); }); 

          
 
  Topo Map