我试图保持我的传单控件扩展并颠倒它使我的基础层的顺序。目前，控件仅在悬停时打开，并自动对我的图层2009-2015进行排序。我希望他们能够去2015-2009。
我在这里阅读了文档http://leafletjs.com/reference.html#control-layers-l.control.layers
我明白这应该是一个容易做到的改变＆＃39;崩溃＆＃39;和＆＃39; autoZIndex＆＃39;假，我做错了什么？我觉得这很容易解决......
谢谢！
<!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(
baseLayers, overlayLayers,
{
collapsed: false,
autoZIndex: false
}
);
controls.addTo(map);
</script>
</body>
</html>
答案 0 :(得分：1)
由于我认为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);
不需要。您需要做的就是将选项哈希复制到第一个控件初始化，如
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
} )
答案 1 :(得分：0)
可以帮助传单控制订单层订购选项
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 © <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
进行比较