Question

对此很新，我遇到麻烦，Mapbox尝试使用多个按钮（每层一个）切换显示和隐藏图层的按钮，单个按钮显示每个图层。在这个链接中找到的例子是我正在尝试的基础，而是在一个按钮中使用它而不是填充空间。下面是允许按钮打开和关闭的代码。

map.on('style.load', function() {
  map.addSource('museums', {
    type: 'vector',
    url: 'mapbox://mapbox.2opop9hr'
  });
  map.addLayer({
    'id': 'museums',
    'type': 'circle',
    'source': 'museums',
    'paint': {
      'circle-radius': 8,
      'circle-color': 'rgba(55,148,179,1)'
    },
    'source-layer': 'museum-cusco'
  });

  map.addSource('contours', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-terrain-v2'
  });
  map.addLayer({
    'id': 'contours',
    'type': 'line',
    'source': 'contours',
    'source-layer': 'contour',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': '#877b59',
      'line-width': 1
    }
  });
});

addLayer('Contours', 'contours');
addLayer('Museums', 'museums');

function addLayer(name, id) {
  var link = document.createElement('a');
  link.href = '#';
  link.className = 'active';
  link.textContent = name;

  link.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();

    var visibility = map.getLayoutProperty(id, 'visibility');

    if (visibility === 'visible') {
      map.setLayoutProperty(id, 'visibility', 'none');
      this.className = '';
    } else {
      this.className = 'active';
      map.setLayoutProperty(id, 'visibility', 'visible');
    }
  };

  var layers = document.getElementById('menu');
  layers.appendChild(link);
}

<nav id="dropdown" class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <nav class="dropdown-content">
    <a href="#">value</a>
  </nav>

以前它使用了<nav id="menu"></nav>按钮，但是我添加了一个简单的下拉按钮，如下图所示，但我不能为我的生活弄清楚如何将两者连接在一起以替换菜单按钮有多个选项的下拉列表。我已经尝试了一段时间摆弄不同的部分，但真相被告知我迷失了。非常感谢任何帮助这个新手。

由于

在Mapbox GL-JS中切换菜单按钮（显示/隐藏图层）

0 个答案: