Mapbox如何设置菜单，以便仅“可见"菜单层处于“开"状态.状态 [英] Mapbox how to set up the menu so that only the "visible" layers are in an "On" state
本文介绍了Mapbox如何设置菜单，以便仅“可见"菜单层处于“开"状态.状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个菜单，该菜单使我可以打开和关闭图层.最初显示地图时，我只希望打开两个图层. 我已经能够使用以下命令关闭我想要关闭的图层:
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!
推荐答案
<!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>
这篇关于Mapbox如何设置菜单，以便仅“可见"菜单层处于“开"状态.状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
