如何在Mapbox GL JS中为点击元素添加active类并切换状态

核心思路 #

点击图层链接时，先统一移除所有链接的active类，再给当前点击的链接添加该类，同时控制对应图层的显示/隐藏。另外需要修正原代码中重复添加DOM元素的问题。

具体修改步骤 #

1. 添加Active类样式：在CSS中定义active类的视觉效果，比如改变颜色、加粗等，让激活状态清晰可见。
2. 修改点击事件逻辑：在点击函数中先清除所有链接的激活状态，再给当前点击的链接标记激活状态。
3. 移除重复DOM操作：原代码中重复添加了链接元素，需删除多余的添加逻辑，避免页面出现重复链接。

修改后的完整代码 #

CSS样式部分

/* 自定义active类的视觉效果，可根据需求调整 */
.active {
  color: #1588ff;
  font-weight: 700;
  text-decoration: underline;
}

/* 可选：给菜单链接添加基础样式，提升交互体验 */
#menu a {
  display: block;
  margin: 8px 0;
  cursor: pointer;
}

JavaScript代码部分

mapboxgl.accessToken = '<my access token>';
var map = new mapboxgl.Map({
  container: 'map',
  style: '< my style>', // 替换为你的样式URL
  center: [174.7645, -36.8509],
  zoom: 10,
  pitch: 0,
  bearing: 0,
  antialias: true
});
map.on('style.load', () => {
  map.setFog({});
});

map.on('load', function() {
  map.addSource('data', {
    type: 'geojson',
    data: 'sa2fixedmap.json'
  })

// 定义firstSymbolId：获取地图中第一个符号图层的ID，用于图层叠加顺序
const firstSymbolId = map.getStyle().layers.find(layer => layer.type === 'symbol').id;

// 添加图层
map.addLayer({
    'id': 'KULI',
    'type': 'fill',
    'source': 'data',
    'layout': {
      'visibility': 'none'
    },
    'paint': {
      'fill-color': {
        property: 'kuli_geomAgg',
        stops: [
          [0, '#1588ff'],
          [.2, '#69ccfa'],
          [.5, '#ffffb9'],
          [.9, '#ff5959'],
          [1, '#ff0101']
        ]
      }
    }
  }, firstSymbolId);
  map.addLayer({
    'id': 'Train Station',
    'type': 'fill',
    'source': 'data',
    'layout': {
      'visibility': 'none'
    },
    'paint': {
      'fill-color': {
        property: 'station1',
        stops: [
          [0, '#ffffff'],
          [4, '#ffacac'],
          [6, '#ff2b2b'],
          [8, '#ea0000'],
          [10, '#7f0000']
        ]
      }
    }
  }, firstSymbolId);

var alllayersdict = {
'KULI':'KULI',
'Train Station':'transport'
};

// 存储各分类对应的菜单容器
var menuLinks = {};

// 为每个图层创建链接并按分类分组
for (var key in alllayersdict) {
  var theme = alllayersdict[key];
  var link = document.createElement('a');
  link.href = '#';
  link.id = theme;
  link.textContent = String(key);

  link.onclick = function(e) {
    var clickedLayer = this.textContent;
    e.preventDefault();
    e.stopPropagation();

    // 移除所有链接的active类
    document.querySelectorAll('#menu a').forEach(el => el.classList.remove('active'));
    // 给当前点击的链接添加active类
    this.classList.add('active');

    // 控制图层可见性
    for (var key2 in alllayersdict) {
      if (clickedLayer === key2) {
        map.setLayoutProperty(key2, 'visibility', 'visible');
      } else {
        map.setLayoutProperty(key2, 'visibility', 'none');
      }
    }
  };
  
  // 创建分类菜单容器（如果不存在）
  if (!menuLinks.hasOwnProperty(theme)) {
    var menu = document.createElement('div');
    menu.className = 'menu-category';
    var title = document.createElement('h3');
    title.textContent = theme;
    menu.appendChild(title);
    var layers = document.createElement('div');
    layers.className = 'menu-layers';
    menu.appendChild(layers);
    menuLinks[theme] = layers;
    document.getElementById('menu').appendChild(menu);
  }

  // 将链接添加到对应分类的菜单容器中
  menuLinks[theme].appendChild(link);
}

关键说明 #

• document.querySelectorAll('#menu a').forEach(...)：选中所有菜单内的链接，统一清除激活状态，确保同一时间只有一个链接处于激活状态。
• this.classList.add('active')：this指向当前触发点击事件的链接元素，直接给它添加激活类。
• 移除了原代码中重复添加链接的逻辑：避免页面出现重复的图层切换链接，保证DOM结构的正确性。

内容的提问来源于stack exchange，提问作者mankojag