マップボックス "可視"レイヤーだけが "オン"状態になるようにメニューを設定する方法

レイヤーのオン/オフを切り替えるメニューを作成しました。マップが最初に表示されたら、私は2つのレイヤーだけをオンにします。私が使用して初期表示時にオフにしたいレイヤをオフにすることができた。しかし、いくつかの試みの後、私はメニュー表示を持っていることができていないマップボックス "可視"レイヤーだけが "オン"状態になるようにメニューを設定する方法

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

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

トグルされた「オフ」状態でオフになっているレイヤー。現在のマップhere （最初の2つのレイヤーをオフにすると、「オフ」状態がどのように見えるか、薄いグレーのトーン - 最初にオフになっていたボタンを）初めに、このような

私は私が求めていたものと非常に類似していた質問を見ましたが、あなたは私が仕事にこれを得ることができる方法を知っている場合は応答が本当に）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

マップボックス "可視"レイヤーだけが "オン"状態になるようにメニューを設定する方法

答えて

関連する問題