复选框中的叠加图仅显示第一张底图答案

【问题标题】：Overlay map in checkbox only shows with first base map复选框中的叠加图仅显示第一张底图
【发布时间】：2018-11-13 17:40:52
【问题描述】：

复选框中的叠加图仅适用于单击控制层中的第一张底图，当我在第二张底图上时可以看到属性，但看不到地图本身。我正在使用传单似乎很奇怪...................................................... ..................................................... .

  var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    minZoom : 6,
    maxZoom: 17,
    attribution: 'Tiles &copy; Esri &mdash; 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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
  });
  
  
$(document).ready(function(){
    $("#layercontrol2").change(function(){
        if($(this).prop("checked")){ 
    OpenTopoMap.addTo(map);
    return;
  }else {
  
    OpenTopoMap.remove();

    return;

    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <style></style>
</head>

<body>
  <div id="mapid" style="height: 180px"></div>
 	  <div id="layercontrol">
    <input id="layercontrol2" type="checkbox" /> Topo Map
    <br />
    <!--input id="layercontrol3" type="checkbox" /> Satellite
    <br /-->
  </div>
</body>

</html>

【问题讨论】：

标签： jquery leaflet

【解决方案1】：

如果您将autoZIndex 选项设置为true（默认值），Leaflet 层控件会自动管理您传递给它的层的z-index：

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

因此，您的 2 个平铺层 googleearth 和 googleTerrain 的 z-index 分别为 1 和 2。

现在您的第 3 平铺层（OpenTopoMap，您尝试使用自己的复选框在外部管理的层）只有 z-index 为 1（默认值），因此它将位于 googleTerrain 的下方。

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

您还可以将autoZIndex 转换为false，这样您的所有平铺层都具有默认的z-index 值1，在这种情况下，最后添加的平铺层显示在顶部。

var googleearth = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
  minZoom: 6,
  maxZoom: 17,
  attribution: 'Tiles &copy; Esri &mdash; 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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 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: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});


$(document).ready(function() {
  $("#layercontrol2").change(function() {
    if ($(this).prop("checked")) {
      OpenTopoMap.addTo(map);
      return;
    } else {

      OpenTopoMap.remove();

      return;

    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <style></style>
</head>

<body>
  <div id="mapid" style="height: 160px"></div>
  <div id="layercontrol">
    <input id="layercontrol2" type="checkbox" /> Topo Map
    <br />
    <!--input id="layercontrol3" type="checkbox" /> Satellite
    <br /-->
  </div>
</body>

</html>

【讨论】：

如果需要更精细/更明确的控制，请不要忘记map panes。