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

时间:2018-06-04 11:37:31

标签: jquery leaflet

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#C98C00"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/service_start"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="start" />
    <Button
        android:id="@+id/service_stop"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="stop" />
</LinearLayout>
  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;

    }
  });
}); 
 

1 个答案:

答案 0 :(得分:2)

如果您将autoZIndex选项设为z-index(默认值),则“传单图层控件”会自动管理您传递给它的图层的true

  

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

因此,您的2个图块层googleearthgoogleTerrain的{​​{1}}分别为1和2。

现在您的第3个图块层(z-index,您尝试使用自己的复选框在外部管理的图层)只有OpenTopoMap 1(默认值),因此它位于{{ 1}}一个。

解决方案只是为第3层图层z-index指定高googleTerrain值。

您还可以将z-index转换为OpenTopoMap,以便所有拼贴图层的默认autoZIndex值均为1,在这种情况下,最后添加的拼贴图层会显示在顶部。

false
z-index