傳單擴展控制和autoZindex

我想保持我的傳單控制擴大，並扭轉它使我的基礎層的順序。目前，這些控件僅在懸停時打開，並自動爲我的圖層2009-2015訂購。我希望他們去2015 - 2009年。傳單擴展控制和autoZindex

我讀到這裏的文件，http://leafletjs.com/reference.html#control-layers-l.control.layers

我理解這應該是一個很容易通過改變「崩潰」和「autoZIndex」假做，我究竟做錯了什麼？我覺得有一個簡單的修復...

謝謝！

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>Leaflet layers control</title> 
 
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 
 
<script type="text/javascript" src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script> 
 
    
 
    <script type="text/javascript" src='http://code.jquery.com/jquery-2.1.4.min.js'></script> 
 

 
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' /> 
 
<style> 
 
    body { margin:0; padding:0; } 
 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
 

 
    .legend label, 
 
.legend span { 
 
    display:block; 
 
    float:left; 
 
    height:15px; 
 
    width:20%; 
 
    text-align:center; 
 
    font-size:9px; 
 
    color:#808080; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<div id='legend' style='display:none;'> 
 
    <h1 class="year"><span>Title</span></h1> 
 
    <nav class='legend clearfix'> 
 
    <span style='background:#ecfa00 ;'></span> 
 
    <span style='background:#fdda1d ;'></span> 
 
    <span style='background:#f2a80e;'></span> 
 
    <span style='background:#ff0000 ;'></span> 
 
    <span style='background:#c70606 ;'></span> 
 
    <label>#</label> 
 
    <label>#</label> 
 
    <label>#</label> 
 
    <label>#</label> 
 
    <label>#</label> 
 
    <small><a href="#">Source</a></small> 
 
</div> 
 
<div id='map'></div> 
 

 
<script> 
 
    
 
L.mapbox.accessToken = 'apikey_here'; 
 
var map = L.mapbox.map('map').setView([40, -96.50], 4); 
 

 

 
    
 
    map.legendControl.addLegend(document.getElementById('legend').innerHTML); 
 
    
 
    
 
    
 
L.control.layers({ 
 
    '2015': L.mapbox.tileLayer('map.m885g0j9'), 
 
    '2014': L.mapbox.tileLayer('map.m885oklp'), 
 
    '2013': L.mapbox.tileLayer('map.m889lpb4'), 
 
    '2012': L.mapbox.tileLayer('map.m88a236n'), 
 
    '2011': L.mapbox.tileLayer('map.m88an5o9'), 
 
    '2010': L.mapbox.tileLayer('map.m88aj017'), 
 
    '2009': L.mapbox.tileLayer('map.m88aa5jm').addTo(map) 
 

 
}   ) 
 

 
    .addTo(map); 
 
    
 
    
 
    
 
var controls = L.control.layers(
 
\t baseLayers, overlayLayers, 
 
\t { 
 
\t \t collapsed: false, 
 
\t \t autoZIndex: false 
 
\t } 
 
); 
 
controls.addTo(map); 
 
    
 
</script> 
 

 
</body> 
 
</html>

來源

2015-05-22 Jess

因爲我相信L.Control.Layers層排序仍然是一個open issue，你需要的功能只存在於位於https://github.com/elesdoar/leaflet-control-orderlayers插件。

其次，放下你的

var controls = L.control.layers(
    baseLayers, overlayLayers, 
    { 
     collapsed: false, 
     autoZIndex: false 
    } 
); 
controls.addTo(map);

這是不必要的。所有你需要做的就是複製你的選擇哈希第一控制INIT，像

L.control.layers({ 
    '2015': L.mapbox.tileLayer('map.m885g0j9'), 
    '2014': L.mapbox.tileLayer('map.m885oklp'), 
    '2013': L.mapbox.tileLayer('map.m889lpb4'), 
    '2012': L.mapbox.tileLayer('map.m88a236n'), 
    '2011': L.mapbox.tileLayer('map.m88an5o9'), 
    '2010': L.mapbox.tileLayer('map.m88aj017'), 
    '2009': L.mapbox.tileLayer('map.m88aa5jm').addTo(map) 

},null, { 
    collapsed: false, 
    autoZIndex: false 
    }   )

來源

2015-05-22 15:40:39 snkashis

非常感謝！它可以擴展它，但你只需要添加另一個'.addTo（map）;'在最後一個括號之後。但是，順序仍然沒有逆轉..我會看看更多 – Jess

你試過使用插件？ – snkashis

是的，我使用的插件使得摺疊：false開始工作，但autoZindex：false似乎不工作... – Jess

能幫瓣葉控制orderlayers訂購選項

jQuery(function() { 
 
    var map = L.map('map').setView([4.598056, -74.075833], 13); 
 
    var b1 = L.tileLayer('http://a.tiles.mapbox.com/v3/elesdoar.map-856j4yqh/{z}/{x}/{y}.png', { 
 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
    maxZoom: 20 
 
    }); 
 
    var b2 = L.tileLayer('http://a.tiles.mapbox.com/v3/elesdoar.map-lfwx2j04/{z}/{x}/{y}.png', { 
 
    attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', 
 
    maxZoom: 20 
 
    }).addTo(map); 
 
    var baseLayers = { 
 
    'Night': b2, 
 
    'Streets': b1 
 
    }; 
 
    var bogota = L.tileLayer.wms("http://mapas.catastrobogota.gov.co/arcgiswsh/Mapa_Referencia/Mapa_referencia/MapServer/WMSServer", { 
 
    layers: '8,7,6,5,4,2', 
 
    format: 'image/png', 
 
    opacity: 0.45, 
 
    transparent: true, 
 
    attribution: 'Catastro Bogotá http://catastrobogota.gov.co', 
 
    crs: L.CRS.EPSG4326, 
 
    version: '1.3.0' 
 
    }).addTo(map); 
 
    var fire = L.tileLayer('http://openfiremap.org/hytiles/{z}/{x}/{y}.png', { 
 
    attribution: '© OpenFireMap contributors - © OpenStreetMap contributors', 
 
    continuousWorld: true 
 
    }).addTo(map); 
 
    var overlayLayers = { 
 
    'Bogotá': bogota, 
 
    'OpenFireMap': fire 
 
    }; 
 
    var controls = L.control.orderlayers(baseLayers, overlayLayers, { 
 
    collapsed: false, 
 
    order: 'qgis', 
 
    title: 'Layers' 
 
    }); 
 
    controls.addTo(map); 
 
    map.setView([4.649, -74.086], 11); 
 
});

#map { 
 
    height: 300px; 
 
    width: 600px; 
 
} 
 
.leaflet-control-layers { 
 
    width: 150px; 
 
    padding: 10px !important; 
 
} 
 
.leaflet-control-layers-separator { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.leaflet-control-layers .leaflet-control-layers-title { 
 
    font-size: 1.2em; 
 
} 
 
.leaflet-control-layers .leaflet-row { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.leaflet-control-layers .leaflet-row .leaflet-input { 
 
    float: left; 
 
    width: 15%; 
 
} 
 
.leaflet-control-layers .leaflet-row .leaflet-name { 
 
    float: left; 
 
    width: 60%; 
 
} 
 
.leaflet-control-layers .leaflet-row .leaflet-up { 
 
    float: left; 
 
    background-image: url(http://elesdoar.github.io/leaflet-control-orderlayers/images/arrow-up.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    height: 20px; 
 
    width: 16px; 
 
    opacity: 0.75; 
 
    cursor: pointer; 
 
} 
 
.leaflet-control-layers .leaflet-row .leaflet-down { 
 
    float: left; 
 
    background-image: url(http://elesdoar.github.io/leaflet-control-orderlayers/images/arrow-down.png); 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    height: 20px; 
 
    width: 16px; 
 
    opacity: 0.75; 
 
    cursor: pointer; 
 
}

<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> 
 
<script src="http://elesdoar.github.io/leaflet-control-orderlayers/javascripts/leaflet.control.orderlayers.min.js"></script> 
 

 
<div id="map"></div>

見https://github.com/elesdoar/leaflet-control-orderlayers#options

並與http://elesdoar.github.io/leaflet-control-orderlayers/

來源

2015-05-22 19:23:27

檢查addTo在''夜'：b2'圖層 –