지도 상자 "보이는"레이어 만 "켜기"상태가되도록 메뉴를 설정하는 방법

레이어를 켜고 끌 수있는 메뉴를 만들었습니다. 처음에는지도가 표시 될 때 두 개의 레이어 만 켜야합니다.지도 상자 "보이는"레이어 만 "켜기"상태가되도록 메뉴를 설정하는 방법

map.on('load', function() { 
 

 
    map.setLayoutProperty('id', 'visibility', 'none'); 
 
});

그러나, 몇 번의 시도 후, 나는 수 없었던 메뉴가 표시 가지고 : 나는 사용하여 초기 화면 동안 내가 해제하려는 레이어를 끌 수 있었다 레이어는 토글 된 "꺼짐"상태에서 꺼져 있습니다. 현재지도를 찾을 수 있습니다 here (처음 두 레이어를 껐다 켜면 "꺼짐"상태가 옅은 회색 톤처럼 보일 것입니다. 처음에는 꺼져있는 버튼을 다음과 같이 표시하고 싶습니다. 시작)

에서 그런 내가 요구하고있는 것과 매우 유사 질문을했다,하지만 당신은 내가 일이 얻을 수있는 방법을 알고있는 경우 응답은 정말 나에게 (Mapbox toggle all layers off except one)

도움이되지 않았다 제발 알려주세요! 도움에 감사드립니다!

출처

2017-12-29 Camila Andino

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

출처

2017-12-29 11:15:42 gvmani

지도 상자 "보이는"레이어 만 "켜기"상태가되도록 메뉴를 설정하는 방법

답변

관련 문제