Saya telah membuat menu yang memungkinkan saya untuk mengaktifkan dan menonaktifkan lapisan. Ketika peta awalnya ditampilkan, saya hanya ingin dua lapisan diaktifkan. Saya telah dapat mematikan lapisan yang saya inginkan selama tampilan awal menggunakan:

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

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

Namun, setelah beberapa kali mencoba, saya belum dapat membuat menu menampilkan lapisan yang mati dalam status "Mati". Anda dapat menemukan peta saat ini di sini (Jika Anda menonaktifkan dua lapisan pertama, Anda dapat melihat bagaimana status "Off" akan terlihat, nada abu-abu terang- Saya ingin tombol yang awalnya mati ditampilkan seperti itu di awal)

Saya melihat pertanyaan yang sangat mirip dengan yang saya tanyakan, tetapi jawabannya tidak terlalu membantu saya (Mapbox matikan semua lapisan kecuali satu)

Jika Anda tahu bagaimana saya bisa membuatnya bekerja, beri tahu saya! Terima kasih untuk bantuannya!

1
Camila Andino 29 Desember 2017, 09:54

1 menjawab

Jawaban Terbaik
<!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>
0
gvmani 29 Desember 2017, 11:15