如何在Mapbox GL表达式中按缩放级别移除字段特定词汇？

核心思路 #

根据当前缩放级别（Zlv），动态切换城市名称的显示内容——Zlv 0-10时显示不含'City'的本名，Zlv 11及以上显示完整名称。以下是两种可行方案：

方案一：JavaScript动态替换文本 #

1. 先给表格内的城市名称元素添加统一类名，方便批量操作：

<div class="s-table-container">
  <table class="s-table">
    <thead><tr><th>name</th></tr></thead>
    <tbody>
      <tr><td class="city-name">Atlanta City</td></tr>
      <tr><td class="city-name">Paris City</td></tr>
      <tr><td class="city-name">London City</td></tr>
      <tr><td class="city-name">...</td></tr>
    </tbody>
  </table>
</div>

2. 编写处理函数，结合缩放级别事件触发文本替换：

// 替换成你项目中获取当前缩放级别的方法，比如地图API的getZoom()
function getCurrentZoomLevel() {
  // 示例返回值，实际按项目逻辑修改
  return map.getZoom();
}

function updateCityNames() {
  const zlv = getCurrentZoomLevel();
  const cityElements = document.querySelectorAll('.city-name');
  
  cityElements.forEach(el => {
    const fullName = el.textContent.trim();
    // 去掉末尾的' City'，若有大小写差异可改成/\s[Cc]ity$/
    const baseName = fullName.replace(/\sCity$/, '');
    
    el.textContent = zlv <= 10 ? baseName : fullName;
  });
}

// 页面初始化时执行一次
updateCityNames();
// 监听缩放级别变化事件，以Leaflet地图为例
map.on('zoomend', updateCityNames);

方案二：CSS结合数据属性实现无文本修改切换 #

1. 给每个城市元素添加存储完整名称的data-full属性，默认显示短名称：

<div class="s-table-container">
  <table class="s-table">
    <thead><tr><th>name</th></tr></thead>
    <tbody>
      <tr><td class="city-name" data-full="Atlanta City">Atlanta</td></tr>
      <tr><td class="city-name" data-full="Paris City">Paris</td></tr>
      <tr><td class="city-name" data-full="London City">London</td></tr>
      <tr><td class="city-name" data-full="...">...</td></tr>
    </tbody>
  </table>
</div>

2. 编写CSS规则，通过容器类名控制显示内容：

/* 默认显示短名称 */
.city-name {
  visibility: visible;
}
/* 缩放级别≥11时，隐藏原文本并显示完整名称 */
.zoom-high .city-name {
  visibility: hidden;
  position: relative;
}
.zoom-high .city-name::after {
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  content: attr(data-full);
}

3. 编写缩放监听函数，动态切换容器类名：

function updateZoomClass() {
  const zlv = getCurrentZoomLevel();
  const container = document.querySelector('.s-table-container');
  
  if (zlv >= 11) {
    container.classList.add('zoom-high');
  } else {
    container.classList.remove('zoom-high');
  }
}

// 初始化+绑定缩放事件
updateZoomClass();
map.on('zoomend', updateZoomClass);

注意事项 #

• 请根据你使用的地图API（如Leaflet、Google Maps）调整getCurrentZoomLevel()的实现逻辑，确保能正确获取当前缩放级别。
• 若城市名称存在特殊格式（比如后缀大小写不统一），可调整正则表达式或数据属性内容适配场景。

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