Question

寻求帮助。我的mapbox.js代码很好，除了我无法完成最后一件事：我希望切换工作方式，以便一次只有一个图层/按钮处于活动状态。因此，当按下新按钮时，另一个按钮会静音。

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

如果有人能引导我朝着正确的方向前进，我会非常感激。代码如下：

<!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>

Mapbox.js独有的图层切换器切换

0 个答案: