时间戳

首页 > 解决方案 > 复选框中的叠加图仅显示第一张底图

jquery - 复选框中的叠加图仅显示第一张底图

问题描述

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

  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: &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>

标签： jqueryleaflet

解决方案

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

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

所以你的 2 个 Tile Layersgoogleearth分别googleTerrain有z-index1 个和 2 个。

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

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

您也可以将 设置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 &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>

推荐阅读