Question

我创建了一个菜单，允许我打开和关闭图层。最初显示地图时，我只想打开两个图层。我可以在初始显示期间使用以下方式关闭我想要的图层：

＆＃13;

map.on('load', function() {

  map.setLayoutProperty('id', 'visibility', 'none');
});

＆＃13;

然而，经过多次尝试后，我还没有能够让菜单显示切换后关闭的图层＆＃34;关闭＆＃34;州。你可以找到当前的地图here （如果您关闭前两个图层，您可以看到＆＃34;关闭＆＃34;状态应该是什么样子，浅灰色调 - 我希望最初关闭的按钮在开始时显示如此）

我看到的问题与我提出的问题非常相似，但回复并没有真正帮助我（Mapbox toggle all layers off except one）

如果你知道如何让它工作，请告诉我！谢谢您的帮助！

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Test</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.2/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<style>
#menu {
    background: rgba(255, 255, 255, 0.7);
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    border-radius: 0px;
    width: 120px;
    border: 0px solid rgba(0,0,0,0.4);
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
#menu a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: block;
    margin: 0;
    padding: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    text-align: center;
}
#menu a:last-child {
    border: none;
}
#menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
}
#menu a.active {
    background-color: rgba(255, 255, 255, 0.7);
    color: rgba(0, 0, 0, 1);
}
#menu a.active:hover {
    background: hsl(55, 1%, 20%);
}
</style>

<table style="
background-color: rgba(255, 255, 255, 0.7);border-radius: 0px;bottom: 30px;box-shadow: 0 1px 2px rgba(0,0,0,0.10);font: 12px/20px 'Helvetica Neue', Arial, sans-serif; padding: 10px; position: absolute;
right: 210px; border-radius: 0px; z-index: 1; margin: 0 0 10px;">
  <tr>
    <th></th>
    <th>Lux</th>
    <th>Light Quality</th>
  </tr>
  <tr>
    <th style="background-color: hsl(204, 100%, 37%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>0-5</td>
    <td>Dark zone/Unsafe</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(188, 100%, 31%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>5-20</td>
    <td>Properly Lit</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(176, 100%, 36%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>20-215</td>
    <td>Very Well Lit</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(55, 86%, 56%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>>215</td>
    <td>Light pollution zone</td>
  </tr>

</table>

<table style="
background-color: rgba(255, 255, 255, 0.7);border-radius: 0px;bottom: 30px;box-shadow: 0 1px 2px rgba(0,0,0,0.10);font: 12px/20px 'Helvetica Neue', Arial, sans-serif; padding: 10px; position: absolute;
right: 10px; border-radius: 0px; z-index: 1; margin: 0 0 10px;">
  <tr>
    <th></th>
    <th>Rating</th>
    <th>Safety Quality</th>
  </tr>
  <tr>
    <th style="background-color: hsl(326, 86%, 53%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>1</td>
    <td>Unsafe</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(326, 63%, 67%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>2</td>
    <td>Somewhat Unsafe</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(289, 100%, 84%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>3</td>
    <td>Don't Know</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(284, 71%, 59%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>4</td>
    <td>Somewhat Safe</td>
  </tr>
  <tr>
    <th style= "background-color: hsl(268, 67%, 46%);border-radius: 50%; display: inline-block;height: 10px; margin-right: 5px; width: 10px"></span></th>
    <td>5</td>
    <td>Very Safe</td>
  </tr>

</table>

<nav id="menu"></nav>
<div id='map'></div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2FtaWxhYW5kaW5vIiwiYSI6ImNqMWlhbnlubDAxNHIyd2xtanQwZmZ3NTkifQ.QypsX075VYyKWFYilxAfxA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/camilaandino/cj84exi6q0n9d2rk727n1wyxp',
    center: [-76.134965, 43.036161],
    minZoom: 15,
    zoom: 15.2
});
var zoomThreshold = 5;
map.on('load', function() {
  map.setLayoutProperty('user-data-comments', 'visibility', 'none');
 // map.setLayoutProperty('user-data-comments-text', 'visibility', 'none');
  map.setLayoutProperty('lighting-data-less-than-5', 'visibility', 'none');
  map.setLayoutProperty('lighting-data-less-than-5-text', 'visibility', 'none');
  map.setLayoutProperty('lighting-data-between-5-and-215', 'visibility', 'none');
  map.setLayoutProperty('lighting-data-between-5-and-215-text', 'visibility', 'none');
  map.setLayoutProperty('user-data-less-than-3', 'visibility', 'none');
  map.setLayoutProperty('user-data-less-than-3-text', 'visibility', 'none');
  map.setLayoutProperty('user-data-4-and-5', 'visibility', 'none');
  map.setLayoutProperty('user-data-4-and-5-text', 'visibility', 'none');
});
toggleLayer(['lighting-data', 'lighting-data-text'], 'All light levels',"visible");
toggleLayer(['user-data','user-data-text'], 'All ratings',"visible");
toggleLayer(['lighting-data-less-than-5','lighting-data-less-than-5-text'], 'Light levels <5');
toggleLayer(['lighting-data-between-5-and-215','lighting-data-between-5-and-215-text'], 'Light levels between 5-215');
toggleLayer(['user-data-less-than-3','user-data-less-than-3-text'], 'Safety ratings 3 or less');
toggleLayer(['user-data-4-and-5','user-data-4-and-5-text'], 'Safety ratings 4 and 5');
toggleLayer(['user-data-comments'], 'Student comments');
function toggleLayer(ids, name , show) {
    var link = document.createElement('a');
    link.href = '#';
    link.className = show === "visible" ?'active':"";
    link.textContent = name;
    link.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        for (layers in ids){
            var visibility = map.getLayoutProperty(ids[layers], 'visibility');
            
            if (visibility === 'visible') {
                map.setLayoutProperty(ids[layers], 'visibility', 'none');
                this.className = '';
            } else {
                this.className = 'active';
                map.setLayoutProperty(ids[layers], 'visibility', 'visible');
            }
         }
    };
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
</script>

</body>

＆＃13;

Mapbox如何设置菜单以便只有＆＃34;可见＆＃34;图层在＆＃34; On＆＃34;州

1 个答案: