Javascript Mapbox.js独占层切换器切换_Javascript_Mapbox

Javascript Mapbox.js独占层切换器切换

javascript mapbox

Javascript Mapbox.js独占层切换器切换,javascript,mapbox,Javascript,Mapbox,请求帮助。我的mapbox.js代码很好，但我无法完成最后一件事：我希望切换能够以某种方式工作，以便一次只激活一个层/按钮。因此，当按下一个新按钮时，另一个按钮将静音对于熟悉js的人来说，这可能是一件非常简单的事情。请注意，有瓷砖、工具提示交互和图例以及按钮如果有人能把我引向正确的方向，我会非常感激。代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>R

请求帮助。我的mapbox.js代码很好，但我无法完成最后一件事：我希望切换能够以某种方式工作，以便一次只激活一个层/按钮。因此，当按下一个新按钮时，另一个按钮将静音

对于熟悉js的人来说，这可能是一件非常简单的事情。请注意，有瓷砖、工具提示交互和图例以及按钮

如果有人能把我引向正确的方向，我会非常感激。代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Russian Waterways</title>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />


  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
#map-ui {
    position: absolute;
    top: 15px;
    left: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 100;
}

#map-ui a {
    font: normal 13px/18px 'Helvetica Neue', Helvetica, sans-serif;
    background: #FFF;
    color: #3C4E5A;
    display: block;
    margin: 0;
    padding: 0;
    border: 1px solid #BBB;
    border-bottom-width: 0;
    min-width: 138px;
    padding: 10px;
    text-decoration: none;
}

#map-ui a:hover {
    background: #ECF5FA;
}

#map-ui li:last-child a {
    border-bottom-width: 1px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}

#map-ui li:first-child a {
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

#map-ui a.active {
    background: #3887BE;
    border-color: #3887BE;
    border-top-color: #FFF;
    color: #FFF;
}
</style>
<ul id='map-ui'></ul>
<div id='map'></div>

<script type='text/javascript'>
var map = L.mapbox.map('map', 'maxmeles.map-a2km8b40', { zoomControl: false }).setView([56.54, 52.16], 4);
var ui = document.getElementById('map-ui');

addLayer(L.mapbox.tileLayer('maxmeles.Spb-Moscow'), L.mapbox.gridLayer('maxmeles.Spb-Moscow'),'Petersburg-Moscow', 1);
addLayer(L.mapbox.tileLayer('maxmeles.Astrakan-MoscowLegend'), L.mapbox.gridLayer('maxmeles.Astrakan-MoscowLegend'),'Moscow-Astrakhan', 2);
addLayer(L.mapbox.tileLayer('maxmeles.SPB-ASTRAKHANLEGENDRED'), L.mapbox.gridLayer('maxmeles.SPB-ASTRAKHANLEGENDRED'),'Petersburg-Astrakhan', 3);
addLayer(L.mapbox.tileLayer('maxmeles.Perm-MoscowLegend'), L.mapbox.gridLayer('maxmeles.Perm-MoscowLegend'),'Moscow-Perm', 4);
addLayer(L.mapbox.tileLayer('maxmeles.moskvakazan'), L.mapbox.gridLayer('maxmeles.moskvakazan'),'Moscow-Kazan', 5);
addLayer(L.mapbox.tileLayer('maxmeles.DonLegend'), L.mapbox.gridLayer('maxmeles.DonLegend'),'Rostov-Astrakhan', 6);
addLayer(L.mapbox.tileLayer('maxmeles.DneprRed'), L.mapbox.gridLayer('maxmeles.DneprRed'),'Kiev-Odessa', 7);
addLayer(L.mapbox.tileLayer('maxmeles.RedTulceaIstanbul'), L.mapbox.gridLayer('maxmeles.RedTulceaIstanbul'),'Tulcea-Istanbul', 8);  
addLayer(L.mapbox.tileLayer('maxmeles.SPB-ROSTOVLEGENDRED'), L.mapbox.gridLayer('maxmeles.SPB-ROSTOVLEGENDRED'),'Rostov-Petersburg', 9);
addLayer(L.mapbox.tileLayer('maxmeles.Rostov-MoscowLegend'), L.mapbox.gridLayer('maxmeles.Rostov-MoscowLegend'),'Rostov-Moscow', 10);
addLayer(L.mapbox.tileLayer('maxmeles.Trans-Siberian'), L.mapbox.gridLayer('maxmeles.Trans-Siberian'),'Trans-Siberian', 11);




function addLayer(layer, gridlayer, name, zIndex) {
    layer
        .setZIndex(zIndex)

    gridlayer
    // add the gridControl the active gridlayer
    var gridControl = L.mapbox.gridControl(gridlayer, {follow: false}).addTo(map);


    // Create a simple layer switcher that toggles layers on and off.
    var item = document.createElement('li');
    var link = document.createElement('a');

    link.href = '#';
    link.className = '';
    link.innerHTML = name;

    link.onclick = function(e) {
        e.preventDefault();
        e.stopPropagation();

        if (map.hasLayer(layer)) {
            map.removeLayer(layer);
            map.removeLayer(gridlayer);          
            map.legendControl.removeLegend(layer.getTileJSON().legend);         

            this.className = '';
        } else {
            map.addLayer(layer);
            map.addLayer(gridlayer);          
            map.legendControl.addLegend(layer.getTileJSON().legend);          
            this.className = 'active';
        }
    };
    item.appendChild(link);
    ui.appendChild(item);
}
new L.Control.Zoom({ position: 'topright' }).addTo(map);

</script>
</body>
</html>


俄罗斯水道
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
#地图用户界面{
位置：绝对位置；
顶部：15px；
左：10px；
列表样式：无；
保证金：0；
填充：0；
z指数：100；
}
#地图用户界面a{
字体：普通13px/18px“Helvetica Neue”，Helvetica，无衬线；
背景：#FFF；
颜色：#3C4E5A；
显示：块；
保证金：0；
填充：0；
边框：1px实心#BBB；
边框底宽：0；
最小宽度：138px；
填充：10px；
文字装饰：无；
}
#地图用户界面a：悬停{
背景：#ECF5FA；
}
#地图ui li：最后一个孩子a{
边框底宽：1px；
-webkit边界半径：0 0 3px 3px；
边界半径：0 0 3px 3px；
}
#李宇图：第一个孩子{
-webkit边界半径：3px 3px 0；
边界半径：3px3px0；
}
#地图用户界面a.active{
背景：#3887BE；
边框颜色：#3887BE；
边框顶部颜色：#FFF；
颜色：#FFF；
}

var map=L.mapbox.map（'map'，'maxmeles.map-a2km8b40'，{zoomControl:false}）.setView（[56.54,52.16]，4）；
var ui=document.getElementById（'map-ui'）；
addLayer（L.mapbox.Tillelayer（'maxmeles.Spb Moscow'）、L.mapbox.gridLayer（'maxmeles.Spb Moscow'）、'Petersburg-Moscow'，1）；
addLayer（L.mapbox.tileLayer（'maxmeles.Astrakan MoscowLegend'）、L.mapbox.gridLayer（'maxmeles.Astrakan MoscowLegend'）、莫斯科-阿斯特拉罕'，2）；
addLayer（L.mapbox.tileLayer（'maxmeles.SPB-ASTRAKHANLEGENDRED'）、L.mapbox.gridLayer（'maxmeles.SPB-ASTRAKHANLEGENDRED'）、Petersburg-Astrakhan'，3）；
addLayer（L.mapbox.Tillelayer（'maxmeles.Perm MoscowLegend'）、L.mapbox.gridLayer（'maxmeles.Perm MoscowLegend'）、'Moscow-Perm'，4）；
addLayer（L.mapbox.Tillelayer（'maxmeles.moskvakazan'）、L.mapbox.gridLayer（'maxmeles.moskvakazan'）、'Moscow-Kazan'，5）；
addLayer（L.mapbox.tileLayer（'maxmeles.DonLegend'）、L.mapbox.gridLayer（'maxmeles.DonLegend'）、'Rostov-Astrakhan'，6）；
addLayer（L.mapbox.tileLayer（'maxmeles.Dnepred'）、L.mapbox.gridLayer（'maxmeles.Dnepred'）、Kiev-Odesa'，7）；
addLayer（L.mapbox.Tillelayer（'maxmeles.RedTulceaIstanbul'）、L.mapbox.gridLayer（'maxmeles.RedTulceaIstanbul'）、Tulcea-Istanbul'，8）；
addLayer（L.mapbox.tileLayer（'maxmeles.SPB-ROSTOVLEGENDRED'）、L.mapbox.gridLayer（'maxmeles.SPB-ROSTOVLEGENDRED'）、Rostov-Petersburg'，9）；
addLayer（L.mapbox.Tillelayer（'maxmeles.Rostov-MoscowLegend'）、L.mapbox.gridLayer（'maxmeles.Rostov-MoscowLegend'）、10）；
addLayer（L.mapbox.Tillelayer（'maxmeles.Trans-Siberian'）、L.mapbox.gridLayer（'maxmeles.Trans-Siberian'）、11号横贯西伯利亚）；
函数addLayer（层、网格层、名称、zIndex）{
层
.setZIndex（zIndex）
网格层
//将gridControl添加到活动的gridlayer中
var gridControl=L.mapbox.gridControl（gridlayer，{follow:false}）.addTo（map）；
//创建一个简单的图层切换器，用于打开和关闭图层。
var item=document.createElement（'li'）；
var link=document.createElement（'a'）；
link.href='#'；
link.className=''；
link.innerHTML=名称；
link.onclick=函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
if（映射图层（图层））{
map.removeLayer（层）；
map.removeLayer（网格层）；
removeLegend（layer.getTileJSON（）.legend）；
this.className=''；
}否则{
map.addLayer（层）；
map.addLayer（gridlayer）；
map.legendControl.addLegend（layer.getTileJSON（）.legend）；
this.className='active'；
}
};
项目.附件（链接）；
ui.追加子项（项目）；
}
新的L.Control.Zoom（{position:'topright'}）.addTo（map）；