问题
I have created a menu that allows me to toggle layers on and off. When the map initially displays, I want only two layers to be turned on. I have been able to turn off the layers i want off during the initial display using:
map.on('load', function() {
map.setLayoutProperty('id', 'visibility', 'none');
});However, after several attempts, I haven't been able to have the menu display the layers that are off in a toggled "Off" state. You can find the current map here (If you toggle the first two layers off, you can see how the "Off" state should look like, the light gray tone- I would like the buttons that are initially off to be displayed as such at the beginning)
I saw a question that was very similar to the one I am asking, but the response didn't really help me (Mapbox toggle all layers off except one)
If you know how I can get this to work, please let me know! Thanks for the help!
回答1:
<!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>来源：https://stackoverflow.com/questions/48018703/mapbox-how-to-set-up-the-menu-so-that-only-the-visible-layers-are-in-an-on-s