如何解决取消单击按钮后如何在地图框中显示所有图层?
我的地图框中有大约7-9层。变量“ toggleableLayerIds”具有所有图层名称。 我创建了一种功能,当单击按钮时,仅在地图上显示该特定图层。 但是当我单击按钮时,我应该看到所有图层都出现在地图上。 我该如何实现
下面是我的代码段:
mapboxgl.accessToken = 'pk.eyJ1IjoibXBhbmRhIiwiYSI6ImNrZXUxMTlvYTI4dWYydXQ1c29xamthOHkifQ.DMoQHp6Js8MR-FPW5MpV9g';
var map = new mapboxgl.Map({
container: 'map',style: 'mapbox://styles/mpanda/ckgsz2his0l7c19rwesmr8amr'
});
map.on('load',function () {
//Declaring all Layers
var toggleableLayerIds = ['Shops','Church','Tourist Spots','Bakery','Bars and Pubs','Restaurants','Cafes','Tram Stops'];
//Button
//#-------------------------------------------------------------------------------------------------------------------------------------------------------
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
var layers = document.getElementById('button');
layers.appendChild(link);
link.onclick = function (e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
for (var j = 0; j < toggleableLayerIds.length; j++) {
if (clickedLayer == toggleableLayerIds[j]) {
layers.children[j].className = 'active';
map.setLayoutProperty(toggleableLayerIds[j],'visibility','visible');
}
else {
layers.children[j].className = '';
map.setLayoutProperty(toggleableLayerIds[j],'none');
}
}
};
}
} );//load
这也是我的css
#button {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0,0.4);
font-family: 'Arial',sans-serif;
}
#button a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0.25);
text-align: center;
}
#button a:last-child {
border: none;
}
#button a:hover {
background-color: #f8f8f8;
color: #404040;
}
#button a.active {
background-color: #3887be;
color: #ffffff;
}
#button a.active:hover {
background: #3074a4;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。